:root {
  --ink: #221b17;
  --coffee: #30231c;
  --paper: #f4efe6;
  --cream: #fffaf1;
  --line: #d9cbb8;
  --muted: #85776c;
  --amber: #d58a27;
  --gold: #e6b45c;
  --green: #607557;
  --evidence-individual: #a9967e;
  --evidence-limited: #c68a3d;
  --evidence-early: #718566;
  --evidence-broad: #4e6e56;
  --outcome-positive: #607557;
  --outcome-mixed: #a47d47;
  --outcome-less-positive: #985f4b;
  --outcome-withheld: #a9967e;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    400 16px/1.55 "DM Sans",
    sans-serif;
}
.wrap {
  max-width: 1160px;
  margin: auto;
  padding-left: 28px;
  padding-right: 28px;
}
.site-header {
  background: var(--coffee);
  color: #fff7eb;
}
.nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 38px;
}
.brand {
  font:
    700 18px/1 "Playfair Display",
    serif;
  letter-spacing: 0.08em;
  color: #fff7eb;
}
.brand span {
  display: block;
  font:
    600 8px "DM Sans",
    sans-serif;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 4px;
}
.nav-links {
  display: flex;
  gap: 24px;
}
.nav a {
  color: #eadfd2;
  text-decoration: none;
}
.nav-links a {
  position: relative;
  padding: 7px 0;
  color: #cdbfb1;
  font-size: 14px;
  font-weight: 600;
}
.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--gold);
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.16s, transform 0.16s;
}
.nav-links a:hover {
  color: #fff7eb;
}
.nav-links a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-actions form {
  margin: 0;
}
.nav-actions .button {
  min-height: 42px;
  white-space: nowrap;
}
.nav-actions form .button {
  border-color: #665247;
  background: transparent;
  color: #eadfd2;
}
.mobile-nav {
  display: none;
}
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #f4e9dc;
  font-size: 13px;
  font-weight: 700;
}
.nav-user__initial {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #80684f;
  border-radius: 50%;
  background: #453328;
  color: var(--gold);
  font: 700 13px "Playfair Display", serif;
}
main {
  padding-top: 52px;
  min-height: calc(100vh - 145px);
}
h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  line-height: 1.12;
  margin: 0.2rem 0;
}
h1 {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.2rem;
}
a {
  color: #9a5810;
  text-decoration-color: #d7a458;
  text-underline-offset: 3px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #a56c24;
  margin: 0 0 10px;
}
.subtle {
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 11px 16px;
  font-family: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
}
.button-gold {
  background: var(--amber);
  color: #21170e !important;
}
.button__short {
  display: none;
}
.button-quiet {
  border-color: #b99e7c;
  color: inherit !important;
  background: transparent;
}
.hero {
  background-image:
    linear-gradient(90deg, rgb(34 24 18 / 92%) 0%, rgb(34 24 18 / 72%) 45%, rgb(34 24 18 / 16%) 100%),
    url("../img/hero.cb856215d90a.png");
  background-position: center;
  background-size: cover;
  color: #fff9ee;
  padding: 46px 52px;
  border-radius: 12px;
  box-shadow: 0 17px 38px #50392533;
}
.hero .eyebrow {
  color: #efbd73;
}
.hero p:not(.eyebrow) {
  color: #dbcaba;
  font-size: 18px;
}
.hero__row,
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: end;
}
.hero__row {
  flex-direction: column;
  align-items: flex-start;
}
.hero__row > div:first-child {
  max-width: 650px;
}
.hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 58px;
}
.stat-card,
.beer-card,
.content-card,
.preference-panel,
.filter-panel,
.guided-form fieldset {
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px #5039250b;
}
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 8px;
}
.stat-card::before,
.taste-profile-group::before,
.impact-portrait__band::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--stat-accent, var(--portrait-accent));
  content: "";
}
.stat-card:nth-child(1) {
  --stat-accent: #d58a27;
  --stat-value: #a45c13;
}
.stat-card:nth-child(2) {
  --stat-accent: #a95f3b;
  --stat-value: #8f4728;
}
.stat-card:nth-child(3) {
  --stat-accent: #758a67;
  --stat-value: #52694a;
}
.stat-card:nth-child(4) {
  --stat-accent: #b69849;
  --stat-value: #856d2c;
}
.stat-card:nth-child(5) {
  --stat-accent: #7e6b91;
  --stat-value: #665477;
}
.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.stat-card strong {
  display: block;
  margin-top: 7px;
  color: var(--stat-value);
  font:
    700 34px "Playfair Display",
    serif;
}
.stat-card i {
  font:
    400 14px "DM Sans",
    sans-serif;
  color: var(--muted);
}
.statistics-section {
  margin-bottom: 58px;
}
.statistics-section > .section-heading {
  margin-bottom: 20px;
}
.statistics-snapshot {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 0;
}
.statistics-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.ownership-evidence {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.statistics-section.ownership-evidence > .section-heading {
  margin-bottom: 16px;
}
.ownership-evidence > .statistics-note {
  margin-top: 8px;
}
.ownership-profiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.combination-row.ownership-profile {
  padding: 14px 18px;
  border-color: color-mix(in srgb, var(--outcome-accent) 38%, #ddcfbd);
  border-left-color: var(--outcome-accent);
  background: color-mix(in srgb, var(--outcome-accent) 7%, var(--cream));
}
.ownership-profile--independent { --outcome-accent: var(--amber); }
.ownership-profile--group { --outcome-accent: var(--evidence-individual); }
.ownership-profile h3 {
  margin: 0;
  color: #38291f;
  font-size: 16px;
}
.ownership-profile header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.ownership-profile__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.ownership-profile__metric {
  display: grid;
  align-content: start;
  gap: 2px;
}
.ownership-profile__metric strong {
  color: var(--coffee);
  font: 600 30px/1.15 "Playfair Display", serif;
  font-variant-numeric: tabular-nums;
}
.ownership-profile__metric strong small {
  margin-left: 3px;
  font: 400 11px "DM Sans", sans-serif;
}
.ownership-profile__metric > span {
  color: var(--muted);
  font-size: 11px;
}
.ownership-profile__metric > .ownership-profile__withheld {
  display: flex;
  align-items: center;
  min-height: 35px;
}
.ownership-comparison-note.combination-row__comparison {
  --outcome-accent: var(--amber);
  --outcome-text: #65513c;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.ownership-comparison-note.combination-row__comparison > strong { justify-self: center; }
.ownership-comparison-note > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.ownership-comparison-note abbr { text-decoration: none; }
.ownership-evidence-label {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.ownership-evidence__details {
  margin-top: 10px;
}
.ownership-evidence__details h3 {
  margin: 16px 0 0;
  font-size: 15px;
}
.ownership-evidence__details ul {
  font-size: 13px;
  padding-left: 20px;
}
@media (max-width: 1100px) {
  .nav {
    position: relative;
    min-height: 68px;
    grid-template-columns: 1fr auto;
    gap: 14px;
  }
  .nav-links,
  .nav-actions {
    display: none;
  }
  .mobile-nav {
    display: block;
  }
  .mobile-nav > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid #665247;
    border-radius: 4px;
    padding: 8px 12px;
    color: #f4e9dc;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .mobile-nav > summary::-webkit-details-marker {
    display: none;
  }
  .mobile-nav > summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .mobile-nav__icon,
  .mobile-nav__icon::before,
  .mobile-nav__icon::after {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
  }
  .mobile-nav__icon {
    position: relative;
  }
  .mobile-nav__icon::before,
  .mobile-nav__icon::after {
    position: absolute;
    left: 0;
    content: "";
  }
  .mobile-nav__icon::before {
    top: -5px;
  }
  .mobile-nav__icon::after {
    top: 5px;
  }
  .mobile-nav__panel {
    position: absolute;
    z-index: 1000;
    top: calc(100% - 1px);
    right: 28px;
    left: 28px;
    padding: 10px;
    border: 1px solid #665247;
    border-top: 3px solid var(--gold);
    border-radius: 0 0 8px 8px;
    background: var(--coffee);
    box-shadow: 0 16px 28px #160e09aa;
  }
  .mobile-nav__links {
    display: grid;
  }
  .mobile-nav__links a {
    padding: 12px 10px;
    border-bottom: 1px solid #4b392f;
    color: #f4e9dc;
    font-size: 15px;
    font-weight: 600;
  }
  .mobile-nav__links a:last-child {
    border-bottom: 0;
  }
  .mobile-nav__links a:hover {
    background: #3b2a21;
  }
  .mobile-nav__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 10px;
  }
  .mobile-nav__actions form,
  .mobile-nav__actions .button {
    width: 100%;
    margin: 0;
  }
  .mobile-nav__actions form .button {
    border-color: #665247;
    background: transparent;
    color: #eadfd2;
  }
}
@media (max-width: 760px) {
  .ownership-profiles { grid-template-columns: 1fr; gap: 10px; }
  .ownership-comparison-note { gap: 3px; }
}
.abv-profile {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
}
.abv-profile-row {
  border-bottom: 1px solid var(--line);
}
.abv-profile-row:last-child {
  border-bottom: 0;
}
.abv-profile-row__summary {
  display: grid;
  grid-template-columns: 120px minmax(120px, 1fr) 105px minmax(180px, auto) 28px;
  align-items: center;
  gap: 18px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
}
.abv-profile-row__summary::-webkit-details-marker {
  display: none;
}
.abv-profile-row__range,
.abv-profile-row__rating {
  display: grid;
  gap: 2px;
}
.abv-profile-row__range > strong {
  font-family: "Playfair Display", serif;
  font-size: 18px;
}
.abv-profile-row__range small,
.abv-profile-row__rating span,
.abv-profile-row__drinkability span {
  color: var(--muted);
  font-size: 11px;
}
.abv-profile-row__exploration > i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eadfce;
}
.abv-profile-row__exploration b {
  display: block;
  width: var(--abv-range-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--gold));
}
.abv-profile-row__rating {
  text-align: right;
}
.abv-profile-row__rating > strong {
  color: var(--coffee);
  font-size: 18px;
}
.abv-profile-row__rating > strong small {
  color: var(--muted);
  font-size: 10px;
}
.abv-profile-row__drinkability {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.abv-profile-row__drinkability span {
  padding: 4px 7px;
  border: 1px solid #dfd0bd;
  border-radius: 999px;
  background: #fffaf2;
  white-space: nowrap;
}
.abv-profile-row__details {
  padding: 14px 20px 17px;
  border-top: 1px solid #e0d3c1;
  background: #fffaf3;
}
.abv-profile-row__details h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
  color: #58483d;
  font-size: 12px;
}
.abv-profile-row__details h3 span {
  color: var(--muted);
  font-size: 10px;
}
.abv-profile-row__details ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.abv-profile-row__details li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
}
.abv-profile-row__details li > span {
  flex: 0 0 auto;
  color: var(--muted);
  text-align: right;
}
.abv-profile-row__details li b {
  color: #8e4815;
}
.exploration-breakdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.exploration-breakdown {
  padding: 18px 22px;
}
.exploration-breakdown > h3 {
  margin: 0 0 10px;
}
.country-exploration-grid {
  display: grid;
  gap: 8px;
}
.country-exploration-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  padding: 10px 12px;
  border: 1px solid #e5d8c7;
  border-radius: 7px;
  background: #fcf7ef;
}
.country-exploration-card__flag {
  font-size: 24px;
}
.country-exploration-card strong,
.country-exploration-card span {
  display: block;
}
.country-exploration-card div > span {
  margin-top: 2px;
  color: #65594f;
  font-size: 11px;
}
.country-exploration-card div > span small {
  color: var(--muted);
}
.country-exploration-card__bar {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #eadfce;
}
.country-exploration-card__bar i {
  display: block;
  width: var(--statistics-value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--gold));
}
.style-exploration-grid {
  display: grid;
  gap: 8px;
}
.style-exploration-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  padding: 10px 12px;
  border: 1px solid #e5d8c7;
  border-radius: 7px;
  background: #fcf7ef;
}
.style-exploration-card__initial {
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff9ee;
  background: #a85d16;
  font-family: "Playfair Display", serif;
  font-size: 14px;
  font-weight: 700;
}
.style-exploration-card strong,
.style-exploration-card div > span {
  display: block;
}
.style-exploration-card div > span {
  margin-top: 2px;
  color: #65594f;
  font-size: 11px;
}
.style-exploration-card div > span small {
  color: var(--muted);
}
.style-exploration-card__bar {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #eadfce;
}
.style-exploration-card__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a85d16, var(--amber));
}
.exploration-card__content {
  min-width: 0;
}
.exploration-card__metrics {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.country-exploration-card .exploration-card__metrics > span,
.style-exploration-card .exploration-card__metrics > span {
  margin: 0;
  color: #65594f;
  font-size: 11px;
}
.country-exploration-card .exploration-card__rating,
.style-exploration-card .exploration-card__rating {
  flex: 0 0 auto;
  color: #4b3020;
  font-weight: 600;
  text-align: right;
}
.exploration-card__rating b {
  color: #8e4815;
  font-family: "Playfair Display", serif;
  font-size: 19px;
  line-height: 1;
}
.exploration-card__sample {
  grid-column: 1 / -1;
  margin-top: -1px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  text-align: right;
}
.country-exploration-grid--more,
.style-exploration-grid--more {
  margin-top: 8px;
}
.exploration-breakdown--breweries {
  grid-column: 1 / -1;
  padding: 22px;
  background:
    radial-gradient(circle at 92% 0, #e7b96524, transparent 31%),
    var(--cream);
}
.brewery-breakdown__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.brewery-breakdown__heading .eyebrow {
  margin-bottom: 6px;
}
.brewery-breakdown__heading h3 {
  margin: 0;
}
.brewery-breakdown__heading > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.brewery-exploration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.brewery-exploration-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dfd0bc;
  border-radius: 9px;
  background: #fffdf8;
  box-shadow: 0 3px 10px #50392509;
}
.brewery-exploration-card__initial {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #e0b977;
  border-radius: 10px 10px 10px 3px;
  background: linear-gradient(145deg, #f4d69e, #d88c28);
  color: #4a2b14;
  font: 700 19px "Playfair Display", serif;
  box-shadow: inset 0 1px #fff8;
}
.brewery-exploration-card__identity {
  min-width: 0;
}
.brewery-exploration-card__identity strong,
.brewery-exploration-card__identity span {
  display: block;
}
.brewery-exploration-card__identity strong {
  overflow: hidden;
  color: #39281e;
  font: 700 16px "Playfair Display", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brewery-exploration-card__identity span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.brewery-exploration-card__metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  border: 1px solid #eadfce;
  border-radius: 6px;
  background: #f8f1e6;
}
.brewery-exploration-card__metrics span {
  padding: 7px 10px;
  color: #6b5b4e;
  font-size: 10px;
  text-align: center;
}
.brewery-exploration-card__metrics span + span {
  border-left: 1px solid #e3d5c1;
}
.brewery-exploration-card__metrics b {
  margin-right: 3px;
  color: #8e4815;
  font-family: "Playfair Display", serif;
  font-size: 16px;
}
.brewery-exploration-grid--more {
  margin-top: 10px;
}
.exploration-more {
  margin-top: 6px;
}
.exploration-more summary {
  color: #a85d16;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.family-overview {
  display: grid;
  gap: 9px;
}
.family-row {
  --family-accent: #a47d47;
  overflow: hidden;
  border: 1px solid #ddcfbd;
  border-left: 4px solid var(--family-accent);
  border-radius: 9px;
  background: var(--cream);
  box-shadow: 0 4px 12px #5039250a;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.family-row--evidence-1 {
  --family-accent: var(--evidence-individual);
}
.family-row--evidence-2 {
  --family-accent: var(--evidence-limited);
}
.family-row--evidence-3 {
  --family-accent: var(--evidence-early);
}
.family-row--evidence-4 {
  --family-accent: var(--evidence-broad);
}
.family-row:hover {
  border-color: #cdb899;
  transform: translateY(-1px);
}
.family-row[open] {
  border-color: #c9b18f;
  box-shadow: 0 12px 28px #50392517;
}
.family-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 24px;
  padding: 18px 20px 18px 18px;
  cursor: pointer;
  list-style: none;
}
.family-row > summary::-webkit-details-marker {
  display: none;
}
.family-row[open] > summary {
  background: linear-gradient(90deg, #f8ead5, #fff9ef 72%);
}
.family-row__identity,
.family-row__outcome {
  display: grid;
}
.family-row__identity > strong {
  color: #33261f;
  font: 700 19px "Playfair Display", serif;
}
.family-row__identity > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.family-row__identity small,
.family-row__outcome span,
.family-style-row small {
  color: var(--muted);
  font-size: 11px;
}
.family-row__identity .family-row__evidence {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--family-accent) 16%, transparent);
  color: color-mix(in srgb, var(--family-accent) 82%, #33261f);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.family-row__outcome {
  min-width: 120px;
  text-align: right;
}
.family-row__outcome > strong {
  color: #8e4815;
  font: 700 22px "Playfair Display", serif;
}
.family-row__outcome > strong small {
  color: var(--muted);
  font: 500 10px "DM Sans", sans-serif;
}
.family-row__toggle,
.combination-row__toggle,
.descriptor-evidence-row__toggle,
.abv-profile-row__toggle {
  display: grid !important;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: var(--muted);
}
.family-row__toggle::after,
.combination-row__toggle::after,
.descriptor-evidence-row__toggle::after,
.abv-profile-row__toggle::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.16s ease;
}
.family-row[open] > summary > .family-row__toggle::after,
.combination-row[open] .combination-row__toggle::after,
.descriptor-evidence-row[open] .descriptor-evidence-row__toggle::after,
.abv-profile-row[open] .abv-profile-row__toggle::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.family-detail {
  padding: 20px 22px 22px;
  border-top: 1px solid #ddc9aa;
  background: #f9f2e8;
}
.family-detail__evidence {
  margin: 0;
  color: #665548;
  font-size: 12px;
  font-weight: 600;
}
.family-detail__note {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--family-accent);
  color: #715f51;
  font-size: 12px;
}
.family-detail__title {
  margin: 18px 0 8px;
  color: #806b5a;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.family-style-list {
  display: grid;
  gap: 7px;
}
.family-style-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid #e3d5c2;
  border-radius: 7px;
  background: #fffdf8;
}
.family-style-row > span {
  display: grid;
}
.family-style-row > span:last-child {
  flex: 0 0 auto;
  text-align: right;
}
.family-style-row > span:last-child > strong {
  color: #8e4815;
  font-family: "Playfair Display", serif;
  font-size: 18px;
}
.family-style-row > span:last-child > strong small {
  font-size: 9px;
}
.structure-comparisons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.structure-comparison {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #ddcfbd;
  border-radius: 9px;
  background: var(--cream);
  box-shadow: 0 4px 12px #5039250a;
}
.structure-comparison__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4d7c5;
  background: linear-gradient(90deg, #f8ead5, #fff9ef 76%);
}
.structure-comparison__heading h3 {
  margin: 0;
  color: #3d2b20;
  font-size: 18px;
}
.structure-comparison__heading small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
}
.structure-value-list {
  padding: 4px 14px;
}
.structure-value-row {
  --outcome-accent: transparent;
  --outcome-text: var(--muted);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 72px;
  align-items: center;
  gap: 12px;
  padding: 11px 2px 11px 10px;
  border-left: 3px solid var(--outcome-accent);
}
.structure-value-row + .structure-value-row {
  border-top: 1px solid #eadfce;
}
.structure-value-row > span {
  display: grid;
}
.structure-value-row__name > strong {
  color: #3f3027;
  font-size: 13px;
}
.structure-value-row small {
  color: var(--muted);
  font-size: 9px;
}
.structure-value-row__name small b {
  color: var(--outcome-text);
  font-weight: 700;
}
.structure-value-row__rating,
.structure-value-row__repeat {
  text-align: right;
}
.structure-value-row__rating > strong {
  color: #8e4815;
  font: 700 18px "Playfair Display", serif;
}
.structure-value-row__rating > strong small {
  font: 500 9px "DM Sans", sans-serif;
}
.structure-value-row__repeat > strong {
  color: #52694a;
  font-size: 13px;
}
.structure-value-row--limited {
  opacity: 0.72;
}
.structure-comparison__observation {
  display: flex;
  min-height: 62px;
  box-sizing: border-box;
  align-items: center;
  margin: auto 0 0;
  padding: 11px 16px 13px;
  border-top: 1px solid #e0c9a7;
  background: #f7eddf;
  color: #665548;
  font-size: 11px;
  line-height: 1.45;
}
.structure-comparison__observation--empty {
  color: transparent;
}
.descriptor-evidence-list {
  display: grid;
  gap: 8px;
}
.descriptor-evidence-row {
  --outcome-accent: var(--outcome-withheld);
  --outcome-text: var(--muted);
  border: 1px solid #ddcfbd;
  border-left: 4px solid var(--outcome-accent);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: 0 3px 10px #50392509;
  overflow: hidden;
}
.descriptor-evidence-row__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 82px 28px;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.descriptor-evidence-row__summary::-webkit-details-marker {
  display: none;
}
.descriptor-evidence-row__summary > span {
  display: grid;
}
.descriptor-evidence-row__identity > strong {
  color: #38291f;
  font: 700 17px "Playfair Display", serif;
}
.descriptor-evidence-row small,
.descriptor-limited-row small {
  color: var(--muted);
  font-size: 10px;
}
.descriptor-evidence-row__identity .evidence-state {
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--evidence-accent) 15%, transparent);
  color: color-mix(in srgb, var(--evidence-accent) 82%, #33261f);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.evidence-state--1 {
  --evidence-accent: var(--evidence-individual);
}
.evidence-state--2 {
  --evidence-accent: var(--evidence-limited);
}
.evidence-state--3 {
  --evidence-accent: var(--evidence-early);
}
.evidence-state--4 {
  --evidence-accent: var(--evidence-broad);
}
.descriptor-evidence-row__rating,
.descriptor-evidence-row__repeat {
  text-align: right;
}
.descriptor-evidence-row__rating > strong,
.descriptor-limited-row > span:last-child > strong {
  color: #8e4815;
  font: 700 19px "Playfair Display", serif;
}
.descriptor-evidence-row__rating > strong small,
.descriptor-limited-row > span:last-child > strong small {
  font: 500 9px "DM Sans", sans-serif;
}
.descriptor-evidence-row__repeat > strong {
  color: #52694a;
  font-size: 14px;
}
.descriptor-evidence-row__details {
  padding: 14px 16px 16px;
  border-top: 1px solid #e0d3c1;
  background: color-mix(in srgb, var(--outcome-accent) 4%, #fffaf3);
}
.descriptor-evidence-row__details h4 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  color: #58483d;
  font-size: 12px;
}
.descriptor-evidence-row__details h4 span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.descriptor-evidence-row__details ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.descriptor-evidence-row__details li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
}
.descriptor-evidence-row__details li > span {
  flex: 0 0 auto;
  color: var(--muted);
  text-align: right;
}
.descriptor-evidence-row__details li > span > strong {
  color: #8e4815;
}
.outcome-state--positive {
  --outcome-accent: var(--outcome-positive);
  --outcome-text: #52694a;
}
.outcome-state--mixed {
  --outcome-accent: var(--outcome-mixed);
  --outcome-text: #80623b;
}
.outcome-state--less {
  --outcome-accent: var(--outcome-less-positive);
  --outcome-text: #825342;
}
.outcome-state--withheld {
  --outcome-accent: transparent;
  --outcome-text: var(--muted);
}
.outcome-state__label {
  color: var(--outcome-text) !important;
  font-weight: 700;
}

.special-status-field {
  margin-top: 1.25rem;
  padding: 1.1rem;
  border: 1px solid #ddcfbd;
  border-radius: 14px;
  background: color-mix(in srgb, #fffaf3 76%, transparent);
}
.special-status-field__heading p { margin: 0; }
.special-status-field__heading p + p { margin-top: .25rem; }
.special-status-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.special-status-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  min-height: 78px;
  padding: .65rem .75rem;
  border: 1px solid #d8cab6;
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: 0 1px 2px rgb(68 46 24 / 5%);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.special-status-option:hover {
  border-color: #b89b72;
  transform: translateY(-1px);
}
.special-status-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, #ad7a23 28%, transparent);
  outline-offset: 2px;
}
.special-status-option:has(input:checked) {
  border-color: #a87824;
  box-shadow: 0 0 0 1px #a87824, 0 5px 14px rgb(100 65 15 / 10%);
  background: #fffaf0;
}
.special-status-option--dungeon:has(input:checked) {
  color: #f7ede3;
  border-color: #593c31;
  background: #2c2320;
  box-shadow: 0 0 0 1px #593c31, 0 5px 14px rgb(30 19 15 / 18%);
}
.special-status-option--sewer:has(input:checked) {
  color: #f3ead7;
  border-color: #76622d;
  background: #29291d;
  box-shadow: 0 0 0 1px #76622d, 0 5px 14px rgb(30 27 15 / 18%);
}
.special-status-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.special-status-option__art {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  overflow: hidden;
}
.special-status-option__art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none;
  height: 100%;
}
.special-status-option--dungeon .special-status-option__art img { left: -100%; }
.special-status-option--nostalgia .special-status-option__art img,
.special-status-option--sewer .special-status-option__art img {
  left: 0;
  width: 100%;
  object-fit: contain;
}
.special-status-option__none {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px dashed #cbbda9;
  border-radius: 50%;
  color: #a59580;
  font-size: 1.25rem;
}
.special-status-option__copy {
  display: grid;
  min-width: 0;
  gap: .15rem;
  line-height: 1.25;
}
.special-status-option__copy strong { font-size: .95rem; }
.special-status-option__copy small { color: var(--muted); font-size: .72rem; }
.special-status-option--dungeon:has(input:checked) .special-status-option__copy small { color: #cdbdaf; }
.special-status-option--sewer:has(input:checked) .special-status-option__copy small { color: #c9c19d; }
.special-status-option__check {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 14px;
  height: 14px;
  border: 1px solid #b8aa97;
  border-radius: 50%;
  background: #fff;
}
.special-status-option:has(input:checked) .special-status-option__check {
  border: 4px solid #a87824;
}
.special-status-option--dungeon:has(input:checked) .special-status-option__check {
  border-color: #a76a4d;
  background: #f7ede3;
}
.special-status-option--sewer:has(input:checked) .special-status-option__check {
  border-color: #a98a34;
  background: #f3ead7;
}
.special-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: -.25rem 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid #c59d39;
  border-radius: 16px;
  background: linear-gradient(120deg, #fff7d6, #fffaf3);
}
.special-status--dungeon {
  color: #f5e7d2;
  border-color: #674537;
  background: linear-gradient(120deg, #211b1a, #493128);
}
.special-status--sewer {
  color: #f3ead7;
  border-color: #76622d;
  background: linear-gradient(120deg, #202119, #45432b);
}
.special-status__art {
  position: relative;
  display: block;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  overflow: hidden;
}
.special-status__art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: fill;
}
.special-status--dungeon .special-status__art img,
.dungeon-hero .special-status__art img { left: -100%; }
.special-status--nostalgia .special-status__art img,
.special-status--sewer .special-status__art img {
  left: 0;
  width: 100%;
  object-fit: contain;
}
.special-status__copy { display: grid; gap: .12rem; }
.special-status__copy small { text-transform: uppercase; letter-spacing: .12em; }
.special-status__copy strong { font-family: "Playfair Display", serif; font-size: 1.5rem; }
.special-status__copy span { font-size: .9rem; opacity: .85; }
.dungeon-page { background: #171312; }
.dungeon-page main { color: #f5e7d2; }
.dungeon-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 850px;
  margin: 2.5rem auto;
  padding: 2rem;
  border: 1px solid #60453a;
  border-radius: 24px;
  background: radial-gradient(circle at 20% 30%, #4b3027, #211b1a 65%);
}
.special-status__art--hero { flex-basis: 180px; width: 180px; height: 180px; }
.dungeon-hero h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5rem); }
.dungeon-hero p { max-width: 55ch; color: #cdbdaf; }
.special-collection-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
  margin-top: 1.25rem;
}
.special-collection-link {
  display: inline-flex;
  gap: .25rem;
  color: inherit;
  font-size: .75rem;
  white-space: nowrap;
  font-weight: 500;
  text-decoration: none;
  opacity: .72;
}
.special-collection-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: .25em; }
.dungeon-list { display: grid; gap: 1rem; max-width: 850px; margin: 0 auto 3rem; }
.dungeon-entry {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid #4c3931;
  border-radius: 16px;
  background: #211b1a;
}
.dungeon-entry h2 { margin: .1rem 0; }
.dungeon-entry h2 a { color: #f5e7d2; }
.dungeon-entry p, .dungeon-entry blockquote { color: #bca99b; }
.dungeon-entry blockquote { margin: .75rem 0 0; }
.dungeon-entry__rating { display: grid; place-content: center; text-align: center; }
.dungeon-entry__rating strong { font: 700 2rem "Playfair Display", serif; }
.dungeon-entry__rating span { color: #9f8d81; font-size: .75rem; }
.sewer-page {
  background:
    linear-gradient(rgba(18, 24, 17, .94), rgba(18, 24, 17, .97)),
    repeating-linear-gradient(0deg, #38402e 0 2px, transparent 2px 42px),
    repeating-linear-gradient(90deg, #38402e 0 2px, transparent 2px 84px),
    #171d15;
}
.sewer-page main { color: #eef0dc; }
.sewer-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 850px;
  margin: 2.5rem auto;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid #687145;
  border-radius: 24px;
  background: radial-gradient(circle at 18% 30%, #59623b, #242b20 65%);
  box-shadow: inset 0 0 0 3px rgba(28, 33, 24, .7), 0 18px 50px rgba(0, 0, 0, .22);
}
.sewer-hero__art {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
}
.sewer-hero__art img { width: 100%; height: 100%; object-fit: contain; }
.sewer-hero h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5rem); }
.sewer-hero p { max-width: 56ch; color: #ccd0ad; }
.sewer-list { display: grid; gap: 1rem; max-width: 850px; margin: 0 auto 3rem; }
.sewer-entry {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid #50593a;
  border-radius: 16px;
  background: linear-gradient(135deg, #252c21, #1d231a);
}
.sewer-entry h2 { margin: .1rem 0; }
.sewer-entry h2 a { color: #eef0dc; }
.sewer-entry p, .sewer-entry blockquote { color: #b7bc9b; }
.sewer-entry blockquote { margin: .75rem 0 0; }
.sewer-entry__rating { display: grid; place-content: center; text-align: center; }
.sewer-entry__rating strong { font: 700 2rem "Playfair Display", serif; }
.sewer-entry__rating span { color: #9ba17f; font-size: .75rem; }
.forbidden-paradise-page {
  background: #062f36;
  color: #fff7df;
}
.forbidden-paradise-page .site-header {
  border-bottom-color: rgba(255, 247, 223, .15);
  background: #06323a;
}
.forbidden-paradise-page .brand,
.forbidden-paradise-page .nav a,
.forbidden-paradise-page .nav-user { color: #fff7df; }
.forbidden-paradise-page .site-footer { color: #a9d3cd; }
.forbidden-paradise-page .site-footer a { color: #f9cf8c; }
.forbidden-paradise-main { max-width: 1240px; }
.paradise-hero {
  position: relative;
  display: grid;
  min-height: min(720px, calc(100vh - 112px));
  margin: 24px 0 72px;
  overflow: hidden;
  align-items: end;
  border: 1px solid rgba(255, 235, 196, .28);
  border-radius: 30px;
  background: #114e58 var(--paradise-art) center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(0, 13, 17, .4);
  isolation: isolate;
}
.paradise-hero__veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 24, 31, .86) 0%, rgba(3, 33, 40, .54) 37%, transparent 72%), linear-gradient(0deg, rgba(1, 24, 31, .5), transparent 45%);
}
.paradise-hero__content { max-width: 620px; padding: clamp(32px, 7vw, 88px); }
.paradise-kicker {
  margin: 0 0 12px;
  color: #ffd38a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.paradise-hero h1 {
  margin: 0;
  color: #fff9e8;
  font: 700 clamp(3.7rem, 9vw, 7.7rem)/.82 "Playfair Display", serif;
  letter-spacing: -.055em;
  text-shadow: 0 5px 25px rgba(1, 18, 22, .42);
}
.paradise-hero__lede { max-width: 40ch; margin: 26px 0; color: #d6ece6; font-size: clamp(1rem, 2vw, 1.25rem); }
.paradise-coordinates { display: flex; align-items: center; gap: 10px; color: #fff4d7; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.paradise-coordinates i { width: 3px; height: 3px; border-radius: 50%; background: #ffbb67; }
.paradise-hero__seal {
  position: absolute;
  top: 32px;
  right: 32px;
  display: grid;
  width: 112px;
  height: 112px;
  place-content: center;
  border: 1px solid rgba(255, 247, 223, .55);
  border-radius: 50%;
  background: rgba(4, 40, 49, .48);
  box-shadow: inset 0 0 0 5px rgba(255, 247, 223, .09);
  text-align: center;
  backdrop-filter: blur(7px);
  transform: rotate(8deg);
}
.paradise-hero__seal span { font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.paradise-hero__seal strong { color: #ffc673; font: 700 34px "Playfair Display", serif; }
.paradise-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 7vw, 90px);
  max-width: 1050px;
  margin: 0 auto 86px;
  align-items: end;
}
.paradise-intro h2 { margin: 0; color: #fff9e8; font: 700 clamp(2.2rem, 5vw, 4.2rem)/1 "Playfair Display", serif; }
.paradise-intro > p { margin: 0; color: #abd4cf; font-size: 1.05rem; line-height: 1.75; }
.paradise-beer {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(340px, 1.2fr);
  max-width: 1050px;
  margin: 0 auto 86px;
  overflow: hidden;
  border: 1px solid rgba(255, 227, 180, .28);
  border-radius: 28px;
  background: linear-gradient(135deg, #0b4650, #07343d);
  box-shadow: 0 24px 60px rgba(0, 17, 21, .26);
}
.paradise-beer__illustration { position: relative; display: grid; min-height: 520px; overflow: hidden; place-items: center; background: radial-gradient(circle at 50% 45%, #e9ad6c 0 3%, #9b668f 4% 19%, #185c63 20% 42%, #08333c 70%); }
.paradise-beer__halo { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255, 234, 190, .44); border-radius: 50%; box-shadow: 0 0 60px #af77b577, inset 0 0 40px #ffd07f33; }
.paradise-beer__bottle { position: relative; z-index: 1; display: grid; width: 94px; height: 270px; place-items: center; border-radius: 21px 21px 28px 28px; background: linear-gradient(90deg, #402517, #885025 46%, #3c2116); box-shadow: 18px 24px 35px rgba(0,0,0,.3); }
.paradise-beer__bottle::before { position: absolute; top: -52px; width: 42px; height: 64px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #3c2116, #875028, #372015); content: ""; }
.paradise-beer__bottle i { display: grid; width: 70px; height: 95px; place-items: center; border: 1px solid #e6bb78; background: #f0d495; color: #184d4d; font: 700 48px "Playfair Display", serif; }
.paradise-beer__pine { position: absolute; right: 24px; bottom: 19px; color: #65a46f; font-size: 70px; transform: scaleX(.7); }
.paradise-beer__content { padding: clamp(30px, 6vw, 72px); align-self: center; }
.paradise-beer__content h2 { margin: 0 0 22px; color: #fff9e8; font: 700 clamp(2.2rem, 5vw, 4rem)/1 "Playfair Display", serif; }
.paradise-beer__description { max-width: 48ch; color: #b7dad4; font-size: 1.05rem; line-height: 1.7; }
.paradise-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 34px 0 12px; border-top: 1px solid rgba(255,255,255,.14); }
.paradise-specs div { padding: 18px 12px 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.paradise-specs dt { color: #78b8b2; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.paradise-specs dd { margin: 4px 0 0; color: #fff4dc; font-size: 16px; font-weight: 700; }
.paradise-specs sup { color: #ffca73; }
.paradise-footnote { color: #78aaa6; font-size: 11px; }
.paradise-directions { max-width: 760px; margin: 0 auto 56px; padding: clamp(30px, 6vw, 58px); border: 1px solid rgba(255, 225, 174, .25); border-radius: 24px; background: linear-gradient(135deg, #f5c679, #dc855e); box-shadow: 0 20px 55px rgba(0, 18, 22, .25); color: #123f42; text-align: center; }
.paradise-directions .paradise-kicker { color: #71422e; }
.paradise-directions h2 { margin: 0; color: #123f42; font: 700 clamp(2rem, 5vw, 3.5rem)/1 "Playfair Display", serif; }
.paradise-directions > p:not(.paradise-kicker):not(.paradise-route-status) { color: #714c3d; }
.paradise-directions__button { padding: 13px 22px; border: 1px solid #123f42; border-radius: 999px; background: #123f42; color: #fff6dc; cursor: pointer; font: 700 13px "DM Sans", sans-serif; }
.paradise-directions__button:hover { background: #0b3033; transform: translateY(-1px); }
.paradise-directions__button:focus-visible { outline: 3px solid #fff7df; outline-offset: 3px; }
.paradise-directions__button:disabled { cursor: default; opacity: .7; transform: none; }
.paradise-route-status { margin: 18px 0 0; color: #123f42; font-weight: 800; }
.paradise-return { display: flex; width: fit-content; align-items: center; gap: 9px; margin: 0 auto 70px; color: #d7eee8; font-size: 13px; font-weight: 700; text-decoration: none; }
.paradise-return:hover { color: #ffd38a; }
@media (max-width: 620px) {
  .special-status-options { grid-template-columns: 1fr; }
  .special-status-option { min-height: 70px; }
  .dungeon-hero { align-items: flex-start; gap: 1rem; padding: 1.25rem; }
  .sewer-hero { align-items: flex-start; gap: 1rem; padding: 1.25rem; }
  .sewer-hero__art { flex-basis: 100px; width: 100px; height: 100px; }
  .special-status__art--hero { flex-basis: 100px; width: 100px; height: 100px; }
  .special-status__art { flex-basis: 74px; width: 74px; height: 74px; }
  .paradise-hero { min-height: 620px; margin-top: 12px; border-radius: 20px; background-position: 62% center; }
  .paradise-hero__veil { background: linear-gradient(0deg, rgba(2, 28, 35, .9), rgba(2, 28, 35, .18) 88%); }
  .paradise-hero__content { padding: 28px 24px 38px; }
  .paradise-hero__seal { top: 18px; right: 18px; width: 82px; height: 82px; }
  .paradise-hero__seal strong { font-size: 25px; }
  .paradise-intro { grid-template-columns: 1fr; margin-bottom: 54px; }
  .paradise-beer { grid-template-columns: 1fr; margin-bottom: 54px; }
  .paradise-beer__illustration { min-height: 380px; }
  .paradise-specs { grid-template-columns: 1fr; }
}
.combination-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.combination-group {
  display: grid;
  align-content: start;
  gap: 8px;
}
.combination-group > h3 {
  margin: 0 0 2px;
  color: #58483d;
  font-size: 15px;
}
.combination-row {
  border: 1px solid #ddcfbd;
  border-left: 4px solid var(--outcome-accent);
  border-radius: 8px;
  background: var(--cream);
  overflow: hidden;
}
.combination-row.outcome-state--positive {
  border-color: color-mix(in srgb, var(--outcome-positive) 38%, #ddcfbd);
  border-left-color: var(--outcome-positive);
  background: color-mix(in srgb, var(--outcome-positive) 7%, var(--cream));
}
.combination-row.outcome-state--less {
  border-color: color-mix(in srgb, var(--outcome-less-positive) 32%, #ddcfbd);
  border-left-color: var(--outcome-less-positive);
  background: color-mix(in srgb, var(--outcome-less-positive) 6%, var(--cream));
}
.combination-row__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.7fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.combination-row__summary::-webkit-details-marker {
  display: none;
}
.combination-row__summary > span {
  display: grid;
  gap: 2px;
}
.combination-row__summary > span > strong {
  color: #38291f;
  font: 700 16px "Playfair Display", serif;
}
.combination-row small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.combination-row__comparison {
  text-align: right;
}
.combination-row__comparison > strong {
  justify-self: end;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--outcome-accent) 14%, transparent);
  color: var(--outcome-text) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
}
.combination-row__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 14px 16px 16px;
  border-top: 1px solid #e0d3c1;
  background: color-mix(in srgb, var(--outcome-accent) 4%, #fffaf3);
}
.combination-row__details h4 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: #58483d;
  font-size: 12px;
}
.combination-row__details h4 span {
  color: var(--outcome-text);
  font-size: 11px;
  white-space: nowrap;
}
.combination-row__details p {
  margin: 3px 0 8px;
  color: var(--muted);
  font-size: 10px;
}
.combination-row__details ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.combination-row__details li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.combination-row__details li strong::after {
  content: "/10";
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}
.impact-combination-row {
  --outcome-accent: #8c581f;
  --outcome-text: #685748;
  overflow-wrap: anywhere;
}
.impact-combination-row .combination-row__details li strong::after {
  content: none;
}
.impact-combination-row .combination-row__details h4 {
  flex-wrap: wrap;
}
.impact-combination-row .combination-row__details h4 span {
  white-space: normal;
}
.impact-combination-row .impact-combination-examples li {
  display: grid;
  gap: 3px;
}
@media (max-width: 760px) {
  .impact-combination-row .combination-row__summary {
    grid-template-columns: minmax(0, 1fr) 28px;
  }
  .impact-combination-row .combination-row__comparison {
    grid-column: 1;
    text-align: left;
  }
  .impact-combination-row .combination-row__comparison > strong {
    justify-self: start;
  }
  .impact-combination-row .combination-row__toggle {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}
.descriptor-limited {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #e0d3c1;
}
.descriptor-limited > h3 {
  margin: 0;
  color: #58483d;
  font-size: 15px;
}
.descriptor-limited > p {
  margin: 3px 0 10px;
  color: var(--muted);
  font-size: 11px;
}
.descriptor-limited__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.descriptor-limited-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid #e2d6c6;
  border-radius: 7px;
  background: #faf5ed;
}
.descriptor-limited-row > span {
  display: grid;
}
.descriptor-limited-row > span:first-child {
  min-width: 0;
}
.descriptor-limited-row > span:last-child {
  flex: 0 0 auto;
  text-align: right;
}
.guided-descriptor-context {
  margin-top: 16px;
  padding: 12px 15px;
  border: 1px solid #d8c5aa;
  border-radius: 7px;
  background: #f8efe2;
  color: #665548;
  font-size: 12px;
}
.guided-descriptor-context summary {
  cursor: pointer;
  font-weight: 700;
}
.guided-descriptor-context > p {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 11px;
}
.guided-descriptor-list {
  display: grid;
  gap: 6px;
}
.guided-descriptor-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 5px;
  background: #fffaf2;
}
.guided-descriptor-row span,
.guided-descriptor-row small {
  color: var(--muted);
  font-size: 10px;
}
.classification-warnings {
  margin-top: 14px;
  padding: 12px 15px;
  border: 1px solid #d8c5aa;
  border-radius: 7px;
  background: #f8efe2;
  color: #665548;
  font-size: 12px;
}
.classification-warnings summary {
  cursor: pointer;
  font-weight: 700;
}
.classification-warnings ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.statistics-bars {
  display: grid;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
}
.statistics-bar-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}
.statistics-bar-row strong,
.statistics-bar-row span {
  font-size: 12px;
  text-align: right;
}
.statistics-bar-row span {
  color: var(--muted);
}
.statistics-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eadfce;
}
.statistics-bar-track i {
  display: block;
  width: var(--statistics-value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--gold));
}
.ibu-comparison {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
}
.ibu-axis,
.ibu-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
}
.ibu-axis {
  color: var(--muted);
  font-size: 10px;
}
.ibu-axis__scale {
  display: flex;
  justify-content: space-between;
}
.ibu-row {
  align-items: center;
}
.ibu-row__label {
  display: grid;
  gap: 2px;
}
.ibu-row__label small {
  color: var(--muted);
  font-size: 10px;
}
.ibu-row__track {
  position: relative;
  height: 52px;
  border-right: 1px solid #d9cbb7;
  border-left: 1px solid #d9cbb7;
  background: linear-gradient(to right, transparent 49.8%, #e2d6c5 50%, transparent 50.2%);
}
.ibu-row__track::after {
  position: absolute;
  top: 25px;
  right: 0;
  left: 0;
  height: 2px;
  background: #dfd2bf;
  content: "";
}
.ibu-point {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: var(--ibu-position);
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
}
.ibu-point--lane-0 { top: 5px; }
.ibu-point--lane-2 { top: 31px; }
.ibu-point span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 2px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px #9e5f22;
}
.ibu-point:hover span,
.ibu-point:focus-visible span {
  background: var(--ink);
  box-shadow: 0 0 0 3px #e8c488;
}
.ibu-beer-details {
  margin-top: 12px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.ibu-beer-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.ibu-beer-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
}
.ibu-beer-groups ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.ibu-beer-groups li {
  margin: 5px 0;
  font-size: 12px;
}
.ibu-beer-groups li span { color: var(--muted); }
.activity-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(34px, 1fr));
  min-height: 230px;
  gap: 10px;
  padding: 24px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
}
.activity-column {
  display: grid;
  grid-template-rows: 22px 150px auto;
  min-width: 0;
  gap: 7px;
  text-align: center;
}
.activity-column__count {
  color: #67584c;
  font-size: 12px;
  font-weight: 700;
}
.activity-column__track {
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  border-radius: 5px 5px 2px 2px;
  background: #eee4d6;
}
.activity-column__track i {
  display: block;
  width: 100%;
  height: var(--statistics-value);
  background: linear-gradient(#e6b45c, #c97822);
}
.activity-column time {
  color: #5d4d41;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.activity-column time small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}
.revisit-list {
  display: grid;
  gap: 12px;
}
.revisit-card {
  padding: 22px 24px;
}
.revisit-card__heading,
.revisit-card__journey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.revisit-card__heading {
  padding-bottom: 16px;
  border-bottom: 1px solid #e5d9c9;
}
.revisit-card__heading h3,
.revisit-card__heading p {
  margin: 0;
}
.revisit-card__heading h3 a {
  color: var(--ink);
}
.revisit-card__heading p,
.revisit-card__heading > span {
  color: var(--muted);
  font-size: 12px;
}
.revisit-card__journey {
  justify-content: flex-start;
  padding-top: 16px;
}
.revisit-card__journey > div {
  display: grid;
  min-width: 150px;
}
.revisit-card__journey small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.revisit-card__journey time {
  color: #6d5e52;
  font-size: 12px;
}
.revisit-card__change {
  margin-left: auto;
  text-align: right;
}
.revisit-card__change strong {
  color: #9a5714;
  font: 700 25px "Playfair Display", serif;
}
.dashboard-journal {
  margin: 0 0 58px;
}
.dashboard-journal__section {
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: 0 8px 24px #5039250e;
}
.dashboard-journal__top--split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}
.dashboard-journal__top .dashboard-insights__snapshot {
  padding: 24px 26px;
}
.dashboard-journal__recent {
  box-shadow: inset 0 4px 0 var(--gold), 0 8px 24px #5039250e;
}
.dashboard-widget-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.dashboard-widget-heading .eyebrow {
  margin: 0 0 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #98753d;
}
.dashboard-widget-heading h2 {
  margin: 0;
  font: 600 25px/1.15 "Playfair Display", serif;
}
.dashboard-widget-heading > a {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.dashboard-widget-heading > a:hover {
  color: #a85d16;
}
.dashboard-widget-heading__summary {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.dashboard-journal__lower {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 18px;
  margin-top: 18px;
}
.dashboard-highlights {
  box-shadow: inset 0 4px 0 #c97825, 0 8px 24px #5039250e;
}
.dashboard-journal .timeline {
  gap: 0;
}
.dashboard-journal .timeline-card {
  margin: 0 -12px;
  padding: 13px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  transition: background 0.16s, box-shadow 0.16s;
}
.dashboard-journal .timeline-card:first-child {
  border-top: 0;
}
.dashboard-journal .timeline-card:hover {
  background: #fff8ee;
  box-shadow: inset 4px 0 #d58a27;
}
.dashboard-journal__history-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.dashboard-journal__history-link:hover {
  color: #a85d16;
}
.timeline-memory {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #8b5b18;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.timeline-memory--dungeon { color: #765044; }
.timeline-memory--sewer { color: #71672e; }
.timeline-memory__art {
  position: relative;
  width: 22px;
  height: 22px;
  overflow: hidden;
}
.timeline-memory__art img,
.dashboard-memory-card__art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none;
  height: 100%;
}
.timeline-memory--dungeon .timeline-memory__art img,
.dashboard-memory-card--dungeon .dashboard-memory-card__art img { left: -100%; }
.timeline-memory--nostalgia .timeline-memory__art img,
.dashboard-memory-card--nostalgia .dashboard-memory-card__art img,
.timeline-memory--sewer .timeline-memory__art img,
.dashboard-memory-card--sewer .dashboard-memory-card__art img {
  left: 0;
  width: 100%;
  object-fit: contain;
}
.dashboard-memories {
  margin-top: 18px;
  box-shadow: inset 0 4px 0 #9d7132, 0 8px 24px #5039250e;
}
.dashboard-memory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dashboard-memory-grid > :only-child { grid-column: 1 / -1; }
.dashboard-memory-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-memory-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 126px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #d9bd71;
  border-radius: 10px;
  background: linear-gradient(120deg, #fff8df, #fffaf3);
  color: var(--ink);
  transition: transform .16s, box-shadow .16s;
}
.dashboard-memory-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px #5039251a;
}
.dashboard-memory-card--dungeon {
  border-color: #674537;
  background: linear-gradient(120deg, #211b1a, #493128);
  color: #f5e7d2;
}
.dashboard-memory-card--sewer {
  border-color: #76622d;
  background: linear-gradient(120deg, #202119, #45432b);
  color: #f3ead7;
}
.dashboard-memory-card__art {
  position: relative;
  width: 74px;
  height: 74px;
  overflow: hidden;
}
.dashboard-memory-card__copy { display: grid; min-width: 0; gap: 3px; }
.dashboard-memory-card__copy small {
  color: #8f672b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dashboard-memory-card--dungeon .dashboard-memory-card__copy small { color: #c9aa91; }
.dashboard-memory-card--sewer .dashboard-memory-card__copy small { color: #c9c19d; }
.dashboard-memory-card__copy strong { font: 600 19px/1.2 "Playfair Display", serif; }
.dashboard-memory-card__copy > span { color: #6d5a49; font-size: 11px; }
.dashboard-memory-card--dungeon .dashboard-memory-card__copy > span { color: #cdbdaf; }
.dashboard-memory-card--sewer .dashboard-memory-card__copy > span { color: #d0c9ad; }
.dashboard-memory-card__copy q {
  margin-top: 5px;
  color: #655044;
  font: 13px/1.35 "Playfair Display", serif;
}
.dashboard-memory-card--dungeon .dashboard-memory-card__copy q { color: #ddcfc2; }
.dashboard-memory-card--sewer .dashboard-memory-card__copy q { color: #ddd7c1; }
.dashboard-memory-card__rating {
  align-self: start;
  color: #93601c;
  font: 700 21px "Playfair Display", serif;
}
.dashboard-memory-card--dungeon .dashboard-memory-card__rating { color: #ddcfc2; }
.dashboard-memory-card--sewer .dashboard-memory-card__rating { color: #ddd7c1; }
.dashboard-memory-card__rating small { margin-left: 2px; font: 500 9px "DM Sans", sans-serif; }
.dashboard-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.dashboard-insights > :only-child {
  grid-column: 1 / -1;
}
.dashboard-insights .dashboard-journal__section {
  padding: 24px 26px;
}
.dashboard-insights__snapshot {
  box-shadow: inset 0 4px 0 #b07b3f, 0 8px 24px #5039250e;
}
.dashboard-insights__discovery {
  box-shadow: inset 0 4px 0 #839975, 0 8px 24px #5039250e;
}
.dashboard-insights__discovery:has(
    .dashboard-discovery-group + .dashboard-discovery-group
  ) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.dashboard-insight-list,
.dashboard-discovery-list {
  display: grid;
}
.dashboard-insight-row,
.dashboard-discovery-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.dashboard-insight-row > span,
.dashboard-discovery-row > time {
  color: #98753d;
  font: 600 10px "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-insight-row h3 {
  margin: 0 0 2px;
  font: 600 16px/1.2 "Playfair Display", serif;
}
.dashboard-insight-row p,
.dashboard-discovery-row p,
.dashboard-explore-next__reason {
  margin: 0;
  color: #65574c;
  font-size: 12px;
  line-height: 1.45;
}
.dashboard-insight-row small,
.dashboard-discovery-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.dashboard-discovery-row strong {
  font: 600 15px "Playfair Display", serif;
}
.dashboard-discovery-row a {
  color: inherit;
}
.dashboard-discovery-group + .dashboard-discovery-group {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.dashboard-insights__discovery:has(
    .dashboard-discovery-group + .dashboard-discovery-group
  )
  .dashboard-discovery-group
  + .dashboard-discovery-group {
  margin-top: 0;
  padding-top: 0;
  padding-left: 22px;
  border-top: 0;
  border-left: 1px solid var(--line);
}
.dashboard-explore-next__reason {
  margin-bottom: 8px;
}
.dashboard-explore-list {
  display: grid;
}
.dashboard-recommendation-row {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 24px 8px 0;
  border-top: 1px solid var(--line);
}
.dashboard-recommendation-row a {
  color: inherit;
}
.dashboard-recommendation-row h3,
.dashboard-recommendation-row p {
  margin: 0;
}
.dashboard-recommendation-row h3 {
  font: 600 15px "Playfair Display", serif;
}
.dashboard-recommendation-row p,
.dashboard-recommendation-row li {
  font-size: 11px;
  line-height: 1.4;
}
.dashboard-recommendation-row small,
.dashboard-recommendation-row__meta {
  color: var(--muted);
  font-size: 9px;
}
.dashboard-recommendation-row__meta {
  font-family: "DM Mono", monospace;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: uppercase;
}
.dashboard-recommendation-row__content {
  display: grid;
  align-content: start;
  gap: 3px;
}
.dashboard-recommendation-row__actions {
  min-width: 0;
}
.dashboard-recommendation-row details ul,
.dashboard-recommendation-history ul {
  margin: 6px 0;
  padding-left: 18px;
}
.dashboard-recommendation-row summary,
.dashboard-recommendation-history summary {
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}
.dashboard-recommendation-row__dismiss {
  position: absolute;
  top: 6px;
  right: 0;
  margin: 0;
}
.dashboard-recommendation-row .button-link {
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 18px/1 sans-serif;
  place-items: center;
  text-decoration: none;
}
.dashboard-recommendation-row .button-link:hover,
.dashboard-recommendation-row .button-link:focus-visible {
  color: var(--ink);
}
.dashboard-recommendation-history {
  margin-top: 10px;
}
.highlight-list {
  display: grid;
}
.highlight-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin: 0 -12px;
  padding: 17px 12px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.16s, box-shadow 0.16s;
}
.highlight-row:last-child {
  border-bottom: 0;
}
.highlight-row__rank {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #f5e4cb;
  color: #9b5a1a;
  font: 600 11px "DM Mono", monospace;
}
.highlight-row__identity,
.highlight-row__identity strong,
.highlight-row__identity small {
  display: block;
  min-width: 0;
}
.highlight-row__identity strong {
  overflow: hidden;
  font: 600 17px/1.25 "Playfair Display", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.highlight-row__identity small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.highlight-row__identity i {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 4px;
  background: #ded2c2;
}
.highlight-row__identity i::after {
  display: block;
  width: var(--highlight-score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a85d16, var(--gold));
  content: "";
}
.highlight-row__score {
  color: #8b5218;
  font: 700 24px "Playfair Display", serif;
}
.highlight-row__score small {
  margin-left: 2px;
  color: var(--muted);
  font: 500 10px "DM Sans", sans-serif;
}
.highlight-row:hover strong {
  color: #9c5d19;
}
.highlight-row:hover {
  background: #fff7ed;
  box-shadow: inset 3px 0 #c97825;
}
.section {
  margin: 55px 0;
}
.style-index-heading {
  max-width: 720px;
}
.style-index-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 28px 0 44px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.style-index-controls fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.style-index-controls legend,
.style-index-controls label {
  color: #685748;
  font-size: 12px;
  font-weight: 700;
}
.style-index-controls .beer-view-tabs {
  margin: 5px 0 0;
}
.style-index-controls select {
  min-width: 170px;
}
.style-class-group {
  margin: 0 0 52px;
}
.style-class-group .section-heading {
  padding-bottom: 14px;
  border-bottom: 2px solid #cdb99d;
}
.style-class-group h2 a,
.style-family-group h3 a {
  color: inherit;
  text-decoration: none;
}
.style-family-group {
  margin-top: 26px;
}
.style-family-group h3 {
  margin-bottom: 12px;
  color: #58473a;
}
.style-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.style-index-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cream);
  box-shadow: 0 4px 12px #5039250a;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.16s, transform 0.16s;
}
.style-index-card:hover {
  border-color: #c59251;
  transform: translateY(-1px);
}
.style-index-card span {
  color: #8b6a48;
  font-size: 12px;
}
.style-index-card--untasted {
  background: #f6f1e9;
  box-shadow: none;
}
.style-index-card--untasted strong {
  color: #665b52;
}
.style-index-card--untasted span {
  color: var(--muted);
}
.section > .section-heading,
.section > .eyebrow + h2 {
  margin-bottom: 22px;
}
.section-heading + .beer-grid {
  margin-top: 22px;
}
.section-heading__actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.experience-date {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -8px 0 18px;
  color: var(--muted);
  font-size: 13px;
}
.experience-date summary {
  color: #9a5810;
  cursor: pointer;
}
.experience-date details[open] {
  flex: 1;
}
.experience-date form {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}
.experience-date label {
  display: grid;
  gap: 4px;
}
.experience-date input {
  padding: 8px 10px;
}
.experience-date .button {
  padding-block: 8px;
}
.timeline {
  display: grid;
  gap: 10px;
}
.timeline-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  background: var(--cream);
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.timeline-card p {
  margin: 2px 0;
}
.timeline-card__content {
  flex: 1;
  min-width: 0;
}
.timeline-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.timeline-card__meta .subtle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.timeline-color {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1px solid #553c2745;
  border-radius: 50%;
  background: var(--beer-color);
  box-shadow: 0 0 0 3px #eee2d3;
}
.timeline-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timeline-verdict i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.timeline-verdict--yes i {
  background: var(--green);
}
.timeline-verdict--no i {
  background: #a95f3b;
}
.timeline-card__byline {
  color: #65574c;
  font-size: 13px;
}
.timeline-card__profile {
  color: var(--muted);
  font-size: 11px;
}
.timeline-card__note {
  margin-top: 8px !important;
  color: #634b3b;
  font: 15px/1.45 "Playfair Display", serif;
}
.tasting-entry__actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 9px;
}
.text-link {
  color: #8c581f;
  font-size: 12px;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tasting-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tasting-badge {
  padding: 4px 8px;
  border: 1px solid #ddd0bf;
  border-radius: 999px;
  background: #f6efe5;
  color: #67594b;
  font-size: 11px;
  font-weight: 600;
}
.tasting-badge--flavor {
  border-color: #e6c78f;
  background: #fff2d9;
  color: #78501f;
}
.tasting-badge--context {
  border-color: #c9bba8;
  background: #eee7dc;
  color: #554a40;
}
.tasting-badge--more {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}
.tasting-badges--detail {
  margin: -8px 0 20px;
}
.tasting-badge small {
  margin-left: 3px;
  opacity: 0.72;
}
.rating-orb {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg, #b96819, #e3a53e);
  box-shadow: 0 5px 12px #a65b1f2e;
  color: #fffaf1;
  font-weight: 700;
}
.verdict {
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 12px;
}
.verdict--yes {
  background: #e1e9d8;
  color: #46603c;
}
.verdict--no {
  background: #f2ded8;
  color: #895144;
}
.two-column,
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 26px;
}
.beer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.beer-grid--library {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}
.beer-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-radius: 8px;
  padding: 21px 22px 18px;
  min-height: 245px;
  background: #fffdf9;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.beer-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #a85d16, var(--gold));
  content: "";
}
.beer-card:hover {
  border-color: #c6aa84;
  box-shadow: 0 14px 28px #50392516;
  transform: translateY(-3px);
}
.beer-card--untasted {
  background: #faf7f1;
}
.beer-card--untasted::before {
  background: linear-gradient(90deg, #8c8176, #c9bfb2);
}
.beer-card--discovered::before {
  background: linear-gradient(90deg, #b7791f, #e2b866);
}
.beer-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.beer-card__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8a5d2b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.beer-card__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px #f5e4cb;
}
.beer-card--untasted .beer-card__status {
  color: #786f67;
}
.beer-card--untasted .beer-card__status i {
  background: #91877d;
  box-shadow: 0 0 0 3px #e9e2d9;
}
.beer-card__memories {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.beer-card__memory {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  overflow: hidden;
  opacity: .78;
}
.beer-card__memory img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none;
  height: 100%;
}
.beer-card__memory--dungeon img { left: -100%; }
.beer-card__memory--nostalgia img,
.beer-card__memory--sewer img {
  left: 0;
  width: 100%;
  object-fit: contain;
}
.beer-card__body {
  margin: 30px 0 24px;
}
.beer-card__style {
  margin: 0 0 7px;
  color: #a26120;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.beer-card h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
}
.beer-card h3 a {
  color: inherit;
  text-decoration: none;
}
.beer-card h3 a:hover {
  color: #9c5d19;
}
.beer-card__brewery {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.beer-card__brewery img {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(52, 38, 27, 0.14);
  object-fit: cover;
}
.rating-chip {
  font: 700 24px/1 "Playfair Display", serif;
  color: #a45c13;
}
.rating-chip small {
  margin-left: 2px;
  color: var(--muted);
  font: 600 10px "DM Sans", sans-serif;
}
.rating-chip--empty {
  color: #afa49a;
}
.beer-card__footer {
  display: block;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #e7ddd0;
}
.beer-card__footer .metadata {
  width: 100%;
  min-height: 27px;
  margin-top: 0;
}
.beer-card__link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 11px;
  color: #8c581f;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.beer-card__link span {
  font-size: 16px;
  transition: transform 0.18s;
}
.beer-card:hover .beer-card__link span {
  transform: translateX(3px);
}
.metadata {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
}
.metadata span {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 8px;
  color: #685748;
}
.metadata .beer-color-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.beer-color-marker i {
  display: inline-block;
  width: 12px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid #553c2738;
  border-radius: 3px 3px 5px 5px;
  background: var(--beer-color);
  box-shadow: inset 0 3px 3px #ffffff4d;
}
.metadata--hero .beer-color-marker i {
  width: 15px;
  height: 21px;
}
.beer-color-marker--pale_straw { --beer-color: #f5e89a; }
.beer-color-marker--gold { --beer-color: #e9bd48; }
.beer-color-marker--amber { --beer-color: #d98220; }
.beer-color-marker--copper { --beer-color: #b65c22; }
.beer-color-marker--brown { --beer-color: #754126; }
.beer-color-marker--dark_brown { --beer-color: #3b251d; }
.beer-color-marker--black { --beer-color: #171414; }
.metadata .country-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.country-marker img {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(52, 38, 27, 0.14);
  object-fit: cover;
}
.catalog-results {
  gap: 18px;
}
.search-results-section {
  margin-top: 38px;
}
.search-results-section > .section-heading {
  margin-bottom: 18px;
}
.search-results-section .beer-grid--library {
  margin-top: 0;
}
.catalog-result {
  display: flex;
  flex-direction: column;
  padding: 22px;
}
.catalog-result--local::before {
  background: linear-gradient(90deg, #a85d16, var(--gold));
}
.catalog-result--external::before {
  background: linear-gradient(90deg, #52694a, #9caf80);
}
.catalog-result--external .beer-card__status {
  color: #52694a;
}
.catalog-result--external .beer-card__status i {
  background: var(--green);
  box-shadow: 0 0 0 3px #e5ecdf;
}
.catalog-result__source {
  padding: 4px 8px;
  border: 1px solid #cbd7c3;
  border-radius: 999px;
  background: #f0f5ec;
  color: #52694a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.catalog-result--external .beer-card__style {
  color: #607557;
}
.catalog-review-form {
  max-width: 880px;
}
.catalog-review-form textarea {
  min-height: 140px;
}
.brewery-match-field {
  padding: 18px;
  border: 1px solid #d7b77f;
  border-radius: 8px;
  background: #fbefdc;
}
.brewery-match-field select {
  width: 100%;
  margin-top: 7px;
}
.brewery-match-field .subtle {
  margin: 8px 0 0;
  font-size: 12px;
}
.brewery-new-label {
  margin-top: 24px;
}
[data-new-brewery-fields][hidden] {
  display: none;
}
.location-review-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.location-review-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}
.location-review-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-weight: 700;
}
.location-review-toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--amber);
}
.location-review-toggle label {
  margin: 0;
}
.preference-panel {
  padding: 23px;
  border-radius: 8px;
}
.location-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.location-card h3 {
  margin-bottom: 9px;
}
.location-card p {
  color: var(--muted);
  margin: 0 0 15px;
}
.location-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 13px;
}
.pattern-panel {
  padding: 30px 32px;
  border: 1px solid var(--line);
  background: #fffdf9;
  box-shadow: inset 0 4px 0 var(--green), 0 8px 24px #5039250e;
}
.pattern-panel__intro {
  padding: 0 0 18px;
}
.pattern-group {
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.pattern-group + .pattern-group {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pattern-group__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.pattern-group__heading h3 {
  margin: 0;
  font: 600 20px "Playfair Display", serif;
}
.pattern-group__heading span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pattern-list {
  display: grid;
}
.pattern-row {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 -12px;
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.16s, box-shadow 0.16s;
}
.pattern-row:last-child {
  border-bottom: 0;
}
.pattern-row__rank {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #e5ecdf;
  color: #52694a;
  font: 600 11px "DM Mono", monospace;
}
.pattern-row__identity,
.pattern-row__identity strong,
.pattern-row__identity small {
  display: block;
  min-width: 0;
}
.pattern-row__identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pattern-row__identity strong img {
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: 0;
  box-shadow: 0 0 0 1px rgba(52, 38, 27, 0.14);
}
.pattern-row__identity small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.pattern-row__identity i {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #ded2c2;
}
.pattern-row__identity i::after {
  display: block;
  width: var(--pattern-score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b46b1d, var(--gold));
  content: "";
}
.pattern-group:last-child .pattern-row__identity i::after {
  background: linear-gradient(90deg, #607557, #9caf80);
}
.pattern-row__score {
  color: #8b5218;
  font: 700 18px "Playfair Display", serif;
}
.pattern-row__score small {
  margin-left: 2px;
  color: var(--muted);
  font: 500 10px "DM Sans", sans-serif;
}
.pattern-row:hover strong {
  color: #52694a;
}
.pattern-row:hover {
  background: #f6faf3;
  box-shadow: inset 3px 0 var(--green);
}
.pattern-empty {
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: 13px;
}
.page-heading,
.form-intro {
  margin: 5px 0 28px;
}
.page-heading > h1 + p,
.form-intro > h1 + p {
  margin-top: 14px;
  margin-bottom: 0;
}
.page-heading > .brewery-country {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
}
.brewery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.beer-view-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eae1d5;
}
.beer-view-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #66584c;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.beer-view-tabs a:hover {
  color: #8c581f;
}
.beer-view-tabs a.is-active {
  background: #fffdf9;
  color: #8c581f;
  box-shadow: 0 2px 8px #50392516;
}
.beer-view-tabs span {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #d8cab8;
  color: #685748;
  font-size: 10px;
}
.beer-view-tabs a.is-active span {
  background: #f3dfbf;
  color: #925617;
}
.statistics-view-tabs {
  margin-bottom: 10px;
}
.taste-profile-portrait {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 42px;
  padding: 6px 0 4px;
  align-items: start;
}
.taste-profile-group,
.impact-portrait__band {
  --portrait-tint: 8%;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--portrait-accent) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--portrait-accent) var(--portrait-tint), var(--cream));
}
.taste-profile-group {
  --portrait-accent: #8c581f;
}
.taste-profile-group--emerging { --portrait-accent: #718566; }
.taste-profile-group--less { --portrait-accent: #9b5d4e; }
.taste-profile-group--mixed { --portrait-accent: #7d6b8a; }
.taste-profile-group h3,
.impact-portrait__band h3 {
  margin: 0 0 24px;
  color: color-mix(in srgb, var(--portrait-accent) 70%, var(--ink));
  font: 700 20px/1.3 Georgia, 'Times New Roman', serif;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}
.taste-profile-group__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 30px;
}
.impact-portrait__spread {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px 24px;
}
.impact-portrait__spread > .impact-portrait__band {
  flex: 1 1 0;
}
.impact-portrait__band {
  --portrait-accent: var(--green);
  --portrait-tint: 6%;
  min-width: 0;
}
.impact-portrait__band h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.impact-portrait__band--less { --portrait-accent: var(--outcome-less-positive); }
.impact-portrait__band--mixed { --portrait-accent: #7d6b8a; }
.impact-portrait__band--early {
  --portrait-accent: #8c581f;
  --portrait-tint: 3%;
  padding: 24px;
}
.impact-portrait__band--early h3 { margin-bottom: 18px; }
.impact-portrait__entries {
  display: grid;
  gap: 20px;
}
.impact-portrait__entry {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.impact-portrait__entry summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  cursor: pointer;
  list-style: none;
}
.impact-portrait__entry summary::-webkit-details-marker { display: none; }
.impact-portrait__entry summary strong {
  color: #3f332b;
  font: 600 17px/1.25 Georgia, 'Times New Roman', serif;
}
.impact-portrait__entry summary > span,
.impact-portrait__note {
  color: #685748;
  font-size: 12px;
}
.impact-portrait__entry summary small {
  flex-basis: 100%;
  color: #8c581f;
  font-size: 10px;
}
.impact-portrait__entry summary:focus-visible {
  outline: 2px solid #8c581f;
  outline-offset: 4px;
}
.impact-portrait__evidence {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  color: #685748;
  font-size: 12px;
}
.impact-portrait__evidence p { margin: 6px 0; }
.impact-portrait__evidence ul { margin: 6px 0; padding: 0; list-style: none; }
.impact-portrait > .impact-portrait__band {
  margin-top: 22px;
}
.impact-portrait > .impact-portrait__band:first-child { margin-top: 0; }
.impact-portrait > .impact-portrait__band .impact-portrait__entries {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 32px;
}
.impact-portrait > .impact-portrait__band .impact-portrait__entry {
  flex: 0 1 270px;
}
.impact-portrait__note { margin: 0 0 18px; font-size: 11px; }
@media (max-width: 700px) {
  .taste-profile-group,
  .impact-portrait__band { padding: 22px; }
  .impact-portrait__band--early { padding: 20px; }
  .impact-portrait__spread { flex-direction: column; gap: 22px; }
  .impact-portrait__spread > .impact-portrait__band {
    flex: none;
    width: 100%;
  }
}
.impact-preferences__rules {
  margin-top: 20px;
  color: #685748;
  font-size: 12px;
  line-height: 1.6;
}
.impact-preferences__rules summary {
  cursor: pointer;
  font-weight: 750;
}
.taste-profile-signal {
  display: grid;
  gap: 4px;
  min-width: min(210px, 100%);
  padding-left: 11px;
  border-left: 2px solid color-mix(in srgb, var(--portrait-accent) 55%, transparent);
}
.taste-profile-signal strong {
  color: #3f332b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}
.taste-profile-signal span {
  color: #685748;
  font-size: 12px;
  line-height: 1.4;
}
.taste-profile-evidence-link {
  display: inline-block;
  margin-top: 28px;
  color: #8c581f;
  font-size: 12px;
  font-weight: 750;
}
@media (max-width: 720px) {
  .taste-profile-portrait {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.filter-panel {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) repeat(2, minmax(110px, 1fr)) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: 8px;
}
.filter-panel label,
.form-grid label,
.full-field {
  font-size: 13px;
  font-weight: 700;
}
.filter-panel > * {
  min-width: 0;
}
.filter-errors {
  grid-column: 1 / -1;
  color: #9a3529;
  font-size: 13px;
}
.autocomplete-kind {
  display: block;
  color: #8f704f;
  font-size: 10px;
  font-weight: 400;
}
.autocomplete-field {
  position: relative;
}
.autocomplete-control {
  position: relative;
  display: block;
}
.autocomplete-control input {
  padding-right: 34px;
}
.autocomplete-chevron {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  margin-top: 2px;
  border-right: 2px solid #8f704f;
  border-bottom: 2px solid #8f704f;
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
}
.autocomplete-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 270px;
  margin: 0;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #cbbbaa;
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: 0 14px 30px #38271d24;
  list-style: none;
}
.autocomplete-menu[hidden] {
  display: none;
}
.autocomplete-menu li {
  padding: 9px 10px;
  border-radius: 5px;
  color: #55483e;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.autocomplete-menu li:hover,
.autocomplete-menu li.is-active {
  background: #fff0da;
  color: #8c581f;
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-actions .button {
  white-space: nowrap;
}
.filter-reset {
  color: #8c581f;
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 3px;
}
input,
select,
textarea {
  width: 100%;
  margin-top: 5px;
  border: 1px solid #cbbbaa;
  background: #fffdf8;
  border-radius: 4px;
  padding: 10px;
  font: inherit;
  color: var(--ink);
}
textarea {
  min-height: 130px;
}
.beer-hero {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 15px 0 40px;
}
.beer-hero__brewery {
  font-size: 19px;
}
.metadata--hero span {
  background: var(--cream);
}
.personal-rating {
  display: flex;
  min-width: 176px;
  align-items: center;
  flex-direction: column;
  text-align: right;
  align-self: end;
}
.personal-rating__label {
  color: #806d5d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.personal-rating__meter {
  display: grid;
  width: 126px;
  height: 126px;
  margin: 10px 0 9px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--amber) var(--rating), #ded1bf 0);
  box-shadow: 0 8px 20px #9d6c2b20;
  transform: rotate(18deg);
}
.personal-rating__meter::before {
  display: block;
  grid-area: 1 / 1;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--cream);
  content: "";
}
.personal-rating__core {
  z-index: 1;
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  flex-direction: column;
  transform: rotate(-18deg);
}
.personal-rating__core strong {
  color: #9a5714;
  font: 700 45px/0.9 "Playfair Display", serif;
}
.personal-rating__core small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.personal-rating__count {
  color: var(--muted);
  font-size: 12px;
}
.personal-rating .personal-rating__empty {
  color: #806d5d;
  font: 700 16px/1 "DM Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.personal-rating__meter--empty {
  background: repeating-conic-gradient(#d9cbb8 0 2deg, transparent 2deg 12deg);
  box-shadow: none;
}
.content-card {
  border-radius: 9px;
  padding: 26px;
}
.content-card > .eyebrow + h2 {
  margin-bottom: 18px;
}
.detail-layout aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}
.beer-profile__details,
.style-profile__details {
  margin: 0;
}
.beer-profile__details > div,
.style-profile__details > div {
  display: grid;
  grid-template-columns: minmax(74px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid #e7ddd0;
}
.beer-profile__details > div:first-child,
.style-profile__details > div:first-child {
  padding-top: 0;
  border-top: 0;
}
.beer-profile dt,
.style-profile dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.beer-profile dd,
.style-profile dd {
  margin: 0;
  color: #4f4035;
  font-size: 13px;
  font-weight: 600;
}
.beer-profile dd a,
.style-profile dd a {
  color: inherit;
}
.beer-profile .country-marker,
.beer-profile .beer-color-marker {
  display: flex;
  align-items: center;
  gap: 7px;
}
.style-profile__description {
  margin: 16px 0 0;
  color: #5d5046;
  font-size: 13px;
  line-height: 1.55;
}
.style-profile__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
}
.product-notes p:last-child {
  margin-bottom: 0;
}
.tasting-history > .section-heading {
  margin-bottom: 28px;
}
.tasting-history > .empty-state {
  margin-top: 6px;
}
.tasting-entry {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.tasting-entry:last-child {
  padding-bottom: 4px;
}
.tasting-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.tasting-entry__header > div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.tasting-entry__header > .tasting-entry__actions {
  align-items: flex-end;
}
.dimension-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 24px;
}
.dimension {
  position: relative;
  background: #efe7dc;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  padding: 3px 8px;
  font-size: 11px;
}
.dimension b {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #e2ae62;
  opacity: 0.65;
}
.dimension span,
.dimension em {
  position: relative;
  font-style: normal;
}
.dimension em {
  float: right;
}
.tasting-note {
  margin: 0;
  padding-top: 4px;
  font:
    17px "Playfair Display",
    serif;
  color: #5a4030;
}
.provenance {
  font-size: 12px;
  color: var(--muted);
  padding: 0 10px;
}
.guided-form {
  max-width: 780px;
}
.guided-form fieldset {
  border-radius: 8px;
  padding: 24px;
  margin: 18px 0;
  border: 1px solid var(--line);
}
.guided-form fieldset > .subtle {
  margin: 0 0 22px;
}
.guided-form fieldset > .form-grid + .subtle {
  margin: 22px 0 0;
}
.guided-form > .button {
  margin-top: 4px;
}
legend {
  font:
    700 20px "Playfair Display",
    serif;
  padding: 0 8px;
}
legend span {
  font:
    600 11px "DM Sans",
    sans-serif;
  color: #a56c24;
  margin-right: 9px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.full-field {
  grid-column: 1/-1;
}
.taste-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.score-options ul,
.score-options > div {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 8px 0;
  list-style: none;
}
.score-options > div > div {
  flex: 0 0 auto;
}
.score-options label {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
}
.score-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
}
.score-options label:has(input:checked) {
  background: var(--amber);
  border-color: var(--amber);
}
.verdict-choice {
  display: flex;
  gap: 10px;
  align-items: center;
}
.verdict-choice input {
  width: auto;
  margin: 0;
}
.verdict-choice + .verdict-choice {
  margin-top: 12px;
}
/* One ordered choice for the beer's future place in your life. */
.guided-form .outcome-field,
.tasting-session .outcome-field {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.tasting-session .form-grid + .outcome-field {
  margin-top: 28px;
}
.outcome-field > legend {
  padding: 0;
  font: 700 14px "DM Sans", sans-serif;
}
.outcome-options > div {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.outcome-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.outcome-options label:has(input:checked) {
  border-color: var(--amber);
  background: #f7e8d2;
}
.outcome-options input {
  width: auto;
  margin: 0;
}
.timeline-verdict--staple i {
  background: #b58537;
}
.verdict--staple {
  color: #6f4c12;
  background: #f7e5b8;
}
.structure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.structure-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.structure-control {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}
.structure-control > strong,
.structure-control > small {
  display: block;
}
.structure-control > small {
  min-height: 42px;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}
.structure-options ul {
  display: grid;
  gap: 6px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.structure-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.structure-options label:has(input:checked) {
  border-color: var(--amber);
  background: #f7e8d2;
  color: #704313;
}
.structure-options input {
  width: auto;
  margin: 0;
}
.choice-guidance {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.choice-guidance strong {
  color: var(--ink-soft);
}
.color-observation {
  margin-top: 20px;
}
.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
}
.color-observation__guidance {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: 13px;
}
.color-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 9px;
}
.color-option {
  min-width: 0;
  cursor: pointer;
}
.color-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.color-option span {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf9;
  color: #594b40;
  font-size: 12px;
  font-weight: 700;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.color-option i {
  width: 24px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid #553c2730;
  border-radius: 5px 5px 8px 8px;
  background: var(--beer-color);
  box-shadow: inset 0 4px 5px #ffffff45;
}
.color-option input:checked + span {
  border-color: #a86522;
  box-shadow: 0 0 0 3px #d58a2724;
  transform: translateY(-1px);
}
.color-option input:focus-visible + span {
  outline: 3px solid #d58a2740;
  outline-offset: 2px;
}
.color-option--pale_straw { --beer-color: #f5e89a; }
.color-option--gold { --beer-color: #e9bd48; }
.color-option--amber { --beer-color: #d98220; }
.color-option--copper { --beer-color: #b65c22; }
.color-option--brown { --beer-color: #754126; }
.color-option--dark_brown { --beer-color: #3b251d; }
.color-option--black { --beer-color: #171414; }
.color-option--empty {
  --beer-color: linear-gradient(135deg, #eee5d9 45%, #c9bbaa 46%, #c9bbaa 54%, #eee5d9 55%);
}
.color-observation__outside {
  margin-top: 14px;
}
.color-observation__outside summary {
  color: #8c581f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.color-observation__outside .color-options {
  margin-top: 12px;
}
.selected-flavors {
  margin: 22px 0;
  padding: 17px 19px;
  border: 1px solid #d8b987;
  border-radius: 8px;
  background: #fbefdc;
}
.selected-flavors[hidden] {
  display: none;
}
.selected-flavors [data-selected-list] {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.selected-flavors [data-selected-list] span,
.flavor-chip {
  padding: 6px 10px;
  border-radius: 18px;
  background: #3c2a20;
  color: #f8d8a7;
  font-size: 13px;
  font-weight: 700;
}
.descriptor-categories {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.descriptor-category {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffdf8;
}
.descriptor-category__heading h3 {
  margin: 0;
}
.descriptor-category__heading {
  cursor: pointer;
}
.descriptor-category__heading::marker {
  color: var(--amber);
}
.descriptor-category__heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.descriptor-category[open] .descriptor-category__heading {
  margin-bottom: 16px;
}
.descriptor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.descriptor-choice {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cream);
  transition: border-color 0.15s, background 0.15s;
}
.descriptor-choice--selected,
.descriptor-choice:has(.descriptor-choice__main input:checked) {
  border-color: var(--amber);
  background: #f9ead4;
  grid-column: span 2;
}
.descriptor-choice__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px;
}
.descriptor-choice__main label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
}
.descriptor-choice__main input {
  width: auto;
  margin: 0;
  accent-color: var(--amber);
}
.descriptor-info {
  position: relative;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: help;
  font-weight: 700;
}
.descriptor-info::after {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(100% + 9px);
  width: 220px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #2f2119;
  color: #fff8ed;
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
}
.descriptor-info:hover::after,
.descriptor-info:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.descriptor-intensity {
  display: none;
  padding: 0 10px 11px;
  border-top: 1px solid #e7d5ba;
}
.descriptor-choice--selected .descriptor-intensity,
.descriptor-choice:has(.descriptor-choice__main input:checked) .descriptor-intensity {
  display: block;
}
.descriptor-intensity > span {
  display: block;
  margin: 9px 0 7px;
  color: var(--muted);
  font-size: 12px;
}
.descriptor-intensity > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.descriptor-intensity label,
.descriptor-intensity button {
  margin: 0;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
}
.descriptor-intensity button {
  background: transparent;
  color: inherit;
  font-family: inherit;
}
.descriptor-intensity label:has(input:checked),
.descriptor-intensity button[aria-pressed="true"] {
  border-color: #8e5b24;
  background: #3c2a20;
  color: #f8d8a7;
}
.descriptor-intensity input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
/* Keep the same pill geometry when controls are unavailable. */
.descriptor-intensity label:has(input:disabled),
.descriptor-intensity button:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: default;
}
.descriptor-intensity label:has(input:focus-visible),
.descriptor-intensity button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
@media (min-width: 761px) {
  .descriptor-grid {
    grid-auto-rows: 1fr;
  }
  .descriptor-choice {
    display: flex;
    flex-direction: column;
  }
  .descriptor-choice--selected,
  .descriptor-choice:has(.descriptor-choice__main input:checked) {
    grid-column: auto;
  }
  .descriptor-choice__main {
    flex: 1;
  }
  .descriptor-intensity {
    display: block;
  }
  .descriptor-intensity > div {
    align-items: stretch;
  }
  .descriptor-intensity label,
  .descriptor-intensity button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.more-descriptors {
  margin-top: 12px;
}
.more-descriptors summary {
  color: #8b5418;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.more-descriptors .descriptor-grid {
  margin-top: 10px;
}
.structure-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.structure-summary > div {
  min-width: 130px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
}
.structure-summary span,
.structure-summary strong {
  display: block;
}
.structure-summary span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.structure-summary strong {
  margin-top: 3px;
}
.flavor-profile {
  margin: 18px 0 22px;
}
.guide-intro,
.tasting-session,
.reveal-card,
.style-reveal {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}
.guide-intro {
  margin-bottom: 28px;
}
.guide-intro h1,
.reveal-card h1 {
  margin: 0 0 8px;
  font: 600 clamp(36px, 6vw, 58px)/1.05 "Playfair Display", serif;
}
.guide-progress {
  position: sticky;
  z-index: 8;
  top: 10px;
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.95);
  box-shadow: 0 5px 18px rgba(55, 36, 20, 0.08);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.guide-progress > div {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #eadfce;
}
.guide-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--gold));
  transition: width 0.2s ease;
}
.selected-flavors--guide {
  position: sticky;
  z-index: 7;
  top: 76px;
  box-shadow: 0 5px 18px rgba(55, 36, 20, 0.08);
}
.guide-step {
  min-height: 470px;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 0 12px 35px rgba(55, 36, 20, 0.07);
}
.guide-step[hidden] {
  display: none;
}
.guide-step h2,
.style-reveal h2 {
  margin: 0 0 14px;
  font: 600 clamp(28px, 4vw, 40px)/1.12 "Playfair Display", serif;
}
.guide-prompt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0;
}
.guide-prompt-grid span,
.guide-callout {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--muted);
}
.guide-prompt-grid strong,
.guide-callout strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
}
.guide-callout {
  margin: 28px 0;
}
.guide-callout p {
  margin: 5px 0 0;
}
.guide-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.structure-grid--guide {
  margin-bottom: 0;
}
.guide-step .verdict-choice {
  margin: 26px 0;
}
.guide-step textarea {
  width: 100%;
  min-height: 150px;
  margin-top: 8px;
}
.reveal-card {
  margin-bottom: 24px;
  padding: 34px;
  border-radius: 14px;
  background: linear-gradient(120deg, #2b211a, #533217);
  color: #fff8ed;
}
.reveal-card .eyebrow {
  color: var(--gold);
}
.reveal-card p:last-child {
  margin-bottom: 0;
  color: #e6d7c5;
}
.style-reveal {
  padding: clamp(26px, 5vw, 44px);
}
.reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}
.reference-characteristic {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  cursor: pointer;
}
.reference-characteristic:has(input:checked) {
  border-color: var(--amber);
  background: #faecd7;
}
.reference-characteristic input {
  flex: 0 0 auto;
  width: auto;
  margin: 4px 0 0;
  accent-color: var(--amber);
}
.reference-characteristic strong,
.reference-characteristic small,
.reference-characteristic em {
  display: block;
}
.reference-characteristic small {
  margin-top: 4px;
  color: var(--muted);
}
.reference-characteristic em {
  margin-top: 7px;
  color: #647a58;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.reference-characteristic--noticed {
  cursor: default;
  background: #eef3e9;
}
.flavor-profile > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.flavor-chip small {
  margin-left: 4px;
  color: #d9b984;
  font-weight: 500;
}
.legacy-profile {
  margin: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.legacy-profile summary {
  cursor: pointer;
}
.legacy-profile > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 15px;
  margin-top: 9px;
}
.button-large {
  padding: 14px 22px;
}
.empty-state {
  border: 1px dashed #c9af8d;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  color: var(--muted);
}
.empty-state h3 + p {
  margin: 10px 0 0;
}
.empty-state p + .button {
  margin-top: 9px;
}
.notice {
  background: #e3eadb;
  color: #3d5736;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 6px;
}
.manual-fallback,
.catalog-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 24px;
}
.manual-fallback h2,
.catalog-next-step h2 {
  margin: 5px 0 7px;
}
.manual-fallback .button,
.catalog-next-step .button {
  flex: 0 0 auto;
}
.site-footer {
  padding-top: 35px;
  padding-bottom: 35px;
  color: var(--muted);
  font-size: 13px;
}
.site-footer__motto {
  margin: 0;
}
.site-footer__attribution {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 0.35em;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.auth-page {
  background:
    radial-gradient(circle at 8% 10%, #e7c78d55, transparent 27rem),
    var(--paper);
}
.auth-main {
  display: grid;
  min-height: calc(100vh - 192px);
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  overflow: hidden;
  border: 1px solid #cdbb9e;
  border-radius: 16px;
  background: var(--cream);
  box-shadow: 0 24px 65px #42281620;
}
.auth-story {
  position: relative;
  display: flex;
  min-height: 550px;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  overflow: hidden;
  background: linear-gradient(145deg, #2b1e17, #563824);
  color: #fff9ee;
}
.auth-story::before,
.auth-story::after {
  position: absolute;
  border: 1px solid #d59c4b55;
  border-radius: 50%;
  content: "";
}
.auth-story::before {
  width: 330px;
  height: 330px;
  right: -170px;
  top: -130px;
}
.auth-story::after {
  width: 190px;
  height: 190px;
  bottom: -105px;
  left: -80px;
}
.auth-story > * {
  position: relative;
}
.auth-story .eyebrow {
  color: #efbd73;
}
.auth-story h1 {
  max-width: 560px;
  font-size: clamp(2.6rem, 4vw, 4.25rem);
}
.auth-story > p:not(.eyebrow) {
  max-width: 500px;
  margin: 20px 0 0;
  color: #dbcaba;
  font-size: 18px;
}
.auth-story__detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  color: #f0d4aa;
  font-size: 13px;
  font-weight: 700;
}
.auth-story__detail span {
  color: var(--gold);
  font-size: 17px;
}
.auth-card {
  align-self: center;
  width: min(100%, 440px);
  padding: 48px;
}
.auth-card h2 {
  font-size: 2.2rem;
}
.auth-card > .subtle {
  margin: 8px 0 28px;
}
.form-field {
  margin: 18px 0;
}
.form-field label {
  display: block;
  margin-bottom: 6px;
  color: #5e4b3d;
  font-size: 13px;
  font-weight: 700;
}
.form-field input {
  margin-top: 0;
  border-radius: 6px;
  padding: 12px;
}
.form-field input:focus {
  border-color: var(--amber);
  outline: 3px solid #e6b45c33;
}
.form-field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.form-field ul,
.auth-card .errorlist {
  margin: 6px 0 0;
  padding: 0;
  color: #9c3c2b;
  font-size: 12px;
  list-style: none;
}
.auth-submit {
  width: 100%;
  margin-top: 10px;
  padding: 13px 18px;
}
.auth-switch {
  margin: 24px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.brewery-map-heading {
  margin-bottom: 24px;
}
.brewery-map-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 6px 18px #5039250b;
}
.brewery-map-legend {
  position: absolute;
  z-index: 500;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  box-shadow: 0 3px 10px #50392518;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.brewery-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brewery-marker-swatch,
.brewery-marker span {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--coffee) 72%, transparent);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: inset 0 3px 3px #ffffff4d;
}
.brewery-marker-swatch--discovered,
.brewery-marker--discovered span {
  border-color: var(--amber);
  background: var(--cream);
  box-shadow: none;
}
.brewery-marker-swatch--unexplored,
.brewery-marker--unexplored span {
  border-color: #91877d;
  background: #e9e2d9;
  box-shadow: none;
}
.brewery-marker {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}
.brewery-marker span {
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.brewery-marker--selected span {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink), inset 0 3px 3px #ffffff4d;
}
.brewery-marker--selected.brewery-marker--discovered span,
.brewery-marker--selected.brewery-marker--unexplored span {
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink);
}
.brewery-cluster-marker {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}
.brewery-cluster-marker span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--coffee) 72%, transparent);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 1px 4px #30231c38, inset 0 3px 3px #ffffff4d;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.brewery-cluster-marker--discovered span {
  border-color: var(--amber);
  background: var(--cream);
  box-shadow: 0 1px 4px #30231c38;
}
.brewery-cluster-marker--unexplored span {
  border-color: #91877d;
  background: #e9e2d9;
  box-shadow: 0 1px 4px #30231c38;
}
.brewery-cluster-marker--mixed span {
  border-color: var(--amber);
  background: linear-gradient(90deg, var(--amber) 50%, var(--cream) 50%);
  box-shadow: 0 1px 4px #30231c38;
}
.brewery-map {
  width: 100%;
  height: min(68vh, 680px);
  min-height: 480px;
}
.brewery-map-popup {
  width: min(230px, calc(100vw - 80px));
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.brewery-map-popup h2 {
  margin: 0 0 5px;
  font-size: 17px;
}
.brewery-map-popup p {
  margin: 0 0 10px;
  color: var(--muted);
}
.brewery-map-popup__metrics {
  display: grid;
  gap: 3px;
}
.brewery-map-popup__metrics span {
  color: var(--muted);
  font-size: 12px;
}
.brewery-map-popup__metrics strong {
  color: var(--ink);
}
.brewery-map-popup__link {
  display: inline-block;
  margin-top: 10px;
  color: var(--coffee);
  font-size: 13px;
  font-weight: 700;
}
.paradise-compass-control {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--coffee) 35%, transparent) !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 14px #30231c3b !important;
}
.paradise-compass {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  color: var(--coffee);
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}
.paradise-compass span { display: block; transition: transform .3s ease, color .3s ease; }
.paradise-compass:hover span { transform: rotate(20deg); }
.paradise-compass:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.paradise-compass--stirring span {
  color: #703b8d;
  filter: drop-shadow(0 0 5px #ae78ca);
  animation: paradise-compass-stir .7s ease-in-out;
}
@keyframes paradise-compass-stir { 50% { transform: rotate(190deg) scale(1.14); } }
.brewery-map-empty {
  margin-top: 24px;
}
.brewery-directory-heading {
  margin-bottom: 22px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.brewery-search {
  display: flex;
  align-items: end;
  gap: 14px;
  margin: 18px 0 34px;
}
.brewery-search .search-field {
  width: min(100%, 560px);
}
.brewery-search__control {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.brewery-search__control input {
  min-width: 0;
  margin: 0;
}
.brewery-search__control .button {
  flex: 0 0 auto;
}
.brewery-map-section {
  margin-top: 14px;
}
.brewery-map-section__heading {
  align-items: end;
  margin-bottom: 12px;
}
.brewery-map-section__heading h2 {
  margin: 2px 0 0;
}
.brewery-map-section .brewery-map-legend {
  position: static;
  box-shadow: none;
}
.brewery-directory {
  margin-top: 52px;
}
.brewery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.brewery-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 3px solid #91877d;
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 0 5px 16px #5039250a;
}
.brewery-card--tasted { border-top-color: var(--amber); }
.brewery-card--discovered { border-top-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.brewery-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brewery-card__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brewery-card__status i {
  width: 9px;
  height: 9px;
  border: 2px solid #91877d;
  border-radius: 50%;
  background: #e9e2d9;
}
.brewery-card--tasted .brewery-card__status i { border-color: var(--coffee); background: var(--amber); }
.brewery-card--discovered .brewery-card__status i { border-color: var(--amber); background: var(--cream); }
.brewery-card__body {
  flex: 1;
  padding: 25px 0 18px;
}
.brewery-card__body h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 23px;
  line-height: 1.15;
}
.brewery-card__body h3 a { color: var(--ink); text-decoration: none; }
.brewery-card__body p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.brewery-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brewery-card__metrics span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.brewery-card__metrics strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 16px; }
.brewery-card__link { margin-top: 15px; color: var(--coffee); font-size: 13px; font-weight: 700; text-decoration: none; }
@media (max-width: 760px) {
  .ibu-axis,
  .ibu-row {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
  }
  .ibu-beer-groups {
    grid-template-columns: 1fr;
  }
  .brewery-grid { grid-template-columns: 1fr; }
  .brewery-map-section__heading { align-items: start; }
  .brewery-map-section .brewery-map-legend { flex-wrap: wrap; }
  .brewery-search { align-items: stretch; flex-direction: column; }
  .hero {
    padding: 34px 26px;
    background-position: 62% center;
  }
  .hero__row,
  .section-heading,
  .beer-hero {
    display: block;
  }
  .hero__actions {
    margin-top: 22px;
  }
  .section-heading > .button {
    margin-top: 16px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .statistics-snapshot {
    grid-template-columns: repeat(2, 1fr);
  }
  .exploration-breakdowns {
    grid-template-columns: 1fr;
  }
  .style-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brewery-breakdown__heading {
    display: block;
  }
  .brewery-breakdown__heading > p {
    margin-top: 7px;
    text-align: left;
  }
  .brewery-exploration-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .family-row > summary {
    grid-template-columns: minmax(0, 1fr) auto 28px;
    gap: 10px 16px;
  }
  .family-row__outcome {
    min-width: 100px;
  }
  .structure-comparisons {
    grid-template-columns: 1fr;
  }
  .abv-profile-row__summary {
    grid-template-columns: 105px minmax(100px, 1fr) 95px 28px;
    gap: 12px;
  }
  .abv-profile-row__drinkability {
    grid-column: 1 / -2;
    justify-content: flex-start;
  }
  .abv-profile-row__toggle {
    grid-column: -2 / -1;
    grid-row: 1 / span 2;
  }
  .descriptor-limited__grid {
    grid-template-columns: 1fr;
  }
  .combination-groups {
    grid-template-columns: 1fr;
  }
  .combination-row__summary {
    grid-template-columns: minmax(0, 1fr) auto 28px;
  }
  .combination-row__comparison {
    text-align: right;
  }
  .combination-row__details {
    grid-template-columns: 1fr;
  }
  .descriptor-evidence-row__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 28px;
    gap: 10px 16px;
  }
  .descriptor-evidence-row__identity {
    grid-column: 1 / -1;
  }
  .descriptor-evidence-row__rating {
    text-align: left;
  }
  .guided-descriptor-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .activity-chart {
    overflow-x: auto;
    grid-template-columns: repeat(12, minmax(44px, 1fr));
  }
  .dashboard-journal__lower {
    grid-template-columns: 1fr;
  }
  .dashboard-journal__top--split {
    grid-template-columns: 1fr;
  }
  .dashboard-memory-grid,
  .dashboard-memory-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }
  .dashboard-memory-grid > :only-child { grid-column: auto; }
  .dashboard-insights {
    grid-template-columns: 1fr;
  }
  .dashboard-insights__discovery:has(
      .dashboard-discovery-group + .dashboard-discovery-group
    ) {
    grid-template-columns: 1fr;
  }
  .dashboard-insights__discovery:has(
      .dashboard-discovery-group + .dashboard-discovery-group
    )
    .dashboard-discovery-group
    + .dashboard-discovery-group {
    margin-top: 14px;
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .two-column,
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .beer-grid--library {
    grid-template-columns: repeat(2, 1fr);
  }
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .filter-panel {
    grid-template-columns: 1fr 1fr;
  }
  .search-field {
    grid-column: 1/-1;
  }
  .personal-rating {
    text-align: left;
    margin-top: 25px;
  }
  .form-grid,
  .taste-controls,
  .structure-grid {
    grid-template-columns: 1fr;
  }
  .descriptor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-prompt-grid,
  .reference-grid {
    grid-template-columns: 1fr;
  }
  .guide-step {
    min-height: 0;
    padding: 26px 20px;
  }
  .section-heading__actions {
    margin-top: 16px;
  }
  .manual-fallback,
  .catalog-next-step {
    align-items: flex-start;
    flex-direction: column;
  }
  .auth-main {
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-story {
    min-height: 0;
    padding: 42px 34px;
  }
  .auth-story h1 {
    font-size: 2.6rem;
  }
  .auth-card {
    width: 100%;
    padding: 38px 34px;
  }
  .brewery-map {
    height: 60vh;
    min-height: 380px;
  }
}
@media (max-width: 460px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .nav {
    min-height: 64px;
  }
  .mobile-nav__panel {
    right: 18px;
    left: 18px;
  }
  .brand {
    font-size: 15px;
  }
  .nav-actions {
    gap: 6px;
  }
  .nav-actions .button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .nav-actions .button__full {
    display: none;
  }
  .nav-actions .button__short {
    display: inline;
  }
  .nav-user__name,
  .nav-actions form {
    display: none;
  }
  .nav-user__initial {
    width: 28px;
    height: 28px;
  }
  .beer-grid,
  .beer-grid--library,
  .location-grid {
    grid-template-columns: 1fr;
  }
  .style-index-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .style-index-grid {
    grid-template-columns: 1fr;
  }
  .stat-grid {
    gap: 8px;
  }
  .beer-view-tabs {
    display: grid;
    width: 100%;
    border-radius: 12px;
  }
  .beer-view-tabs a {
    justify-content: space-between;
  }
  .stat-card {
    padding: 15px;
  }
  .stat-card strong {
    font-size: 28px;
  }
  .revisit-card__heading,
  .revisit-card__journey {
    align-items: flex-start;
  }
  .revisit-card__journey {
    flex-wrap: wrap;
  }
  .revisit-card__journey > div {
    min-width: 110px;
  }
  .revisit-card__change {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .family-style-row {
    align-items: flex-start;
  }
  .dashboard-journal__section,
  .pattern-panel {
    padding: 24px 20px;
  }
  .dashboard-journal .timeline-card {
    padding: 17px 12px;
  }
  .timeline-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .auth-story {
    padding: 36px 26px;
  }
  .auth-story h1 {
    font-size: 2.2rem;
  }
  .auth-story > p:not(.eyebrow) {
    font-size: 16px;
  }
  .auth-card {
    padding: 32px 26px;
  }
  .dimension-grid {
    grid-template-columns: 1fr;
  }
  .descriptor-grid {
    grid-template-columns: 1fr;
  }
  .descriptor-choice--selected,
  .descriptor-choice:has(.descriptor-choice__main input:checked) {
    grid-column: span 1;
  }
  .filter-panel {
    grid-template-columns: 1fr;
  }
}

/* Form controls share a single, intentional surface. */
select {
  appearance: none;
  background-color: #fffdf8;
  background-image: linear-gradient(45deg, transparent 50%, #8f704f 50%),
    linear-gradient(135deg, #8f704f 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 53%,
    calc(100% - 13px) 53%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 38px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px #d58a2726;
  outline: none;
}

.range-field { display: flex; align-items: center; gap: 13px; margin-top: 8px; }
.range-field input[type="range"] { appearance: none; background: transparent; border: 0; box-shadow: none; cursor: pointer; margin: 0; padding: 0; }
.range-field input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--amber), #e4cab0); }
.range-field input[type="range"]::-webkit-slider-thumb { appearance: none; height: 19px; width: 19px; margin-top: -6px; border: 3px solid var(--cream); border-radius: 50%; background: var(--coffee); box-shadow: 0 1px 5px #221b1755; }
.range-field input[type="range"]::-moz-range-track { height: 6px; border-radius: 4px; background: #e4cab0; }
.range-field input[type="range"]::-moz-range-progress { height: 6px; border-radius: 4px; background: var(--amber); }
.range-field input[type="range"]::-moz-range-thumb { height: 14px; width: 14px; border: 3px solid var(--cream); border-radius: 50%; background: var(--coffee); box-shadow: 0 1px 5px #221b1755; }
.range-field output { min-width: 52px; border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; background: var(--cream); color: #875116; font-size: 13px; font-weight: 700; text-align: center; }

.wishlist-form { margin-top: 16px; }
.beer-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 11px;
}
.beer-card__actions .wishlist-form {
  margin: 0;
}
.beer-card__actions .at-home-form {
  margin: 0;
}
.beer-card__actions .beer-card__link {
  width: auto;
  margin-top: 0;
  margin-left: auto;
}
.wishlist-button {
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #8c581f;
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-underline-offset: 3px;
}
.wishlist-button:hover {
  color: #8c581f;
  text-decoration: underline;
  text-decoration-color: #d7a458;
}
.wishlist-button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}
.at-home-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #65594f;
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.at-home-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.at-home-button:hover,
.at-home-button.is-active {
  color: #8c581f;
}
.beer-card__actions .at-home-button.is-active {
  padding: 6px 8px;
  border-radius: 5px;
  background: #f4e5ce;
  font-weight: 600;
}
.at-home-button:hover { text-decoration: underline; text-decoration-color: #d7a458; }
.at-home-button:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.beer-hero__info {
  flex: 1;
  min-width: 0;
}
.beer-hero__info h1 {
  overflow-wrap: anywhere;
}
.beer-hero--with-actions {
  padding-bottom: 24px;
}
.beer-detail__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-bottom: 24px;
}
.beer-detail__actions .wishlist-form {
  margin: 0;
}
.beer-detail__actions .at-home-form { margin: 0; }
.beer-detail__actions .wishlist-button,
.beer-detail__actions .at-home-button,
.beer-detail__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
  color: #8c581f;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  text-underline-offset: 3px;
}
.beer-detail__actions .wishlist-button:hover,
.beer-detail__actions .at-home-button:hover,
.beer-detail__edit:hover {
  background: var(--paper);
  border-color: #b99e7c;
  text-decoration: none;
}
.beer-detail__actions .at-home-button svg {
  width: 20px;
  height: 20px;
}
.beer-detail__actions .at-home-button.is-active {
  border-color: #8c581f;
  background: #8c581f;
  color: #fff9ee;
}
.beer-detail__actions .at-home-button.is-active:hover {
  border-color: #744516;
  background: #744516;
  color: #fff9ee;
}
.colour-exploration-grid { display: grid; gap: 8px; }
.colour-exploration-row {
  display: grid;
  grid-template-columns: 130px minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5d8c7;
  border-radius: 7px;
  background: #fcf7ef;
  font-size: 12px;
}
.colour-exploration-row > .beer-color-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.colour-exploration-row__bar { height: 8px; overflow: hidden; border-radius: 999px; background: #eadfce; }
.colour-exploration-row__bar i { display: block; width: var(--statistics-value); height: 100%; border-radius: inherit; background: var(--amber); }
.colour-exploration-row__count { color: #65594f; white-space: nowrap; }
.colour-exploration-row__rating { color: var(--muted); white-space: nowrap; }
.beer-color-background--pale_straw { background: #f6df8b !important; }
.beer-color-background--gold { background: #e4af24 !important; }
.beer-color-background--amber { background: #c97716 !important; }
.beer-color-background--copper { background: #a75018 !important; }
.beer-color-background--brown { background: #743a20 !important; }
.beer-color-background--dark_brown { background: #42251c !important; }
.beer-color-background--black { background: #1f1917 !important; }
@media(max-width:700px) {
  .colour-exploration-row { grid-template-columns: 120px 1fr auto; }
  .colour-exploration-row__rating { grid-column: 2 / -1; }
}
.beer-detail__edit:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

/* Brewery position previews remain separate from the saved coordinate fields. */
.position-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.position-picker [hidden] {
    display: none;
}
.position-picker button:disabled {
    opacity: 0.45;
    cursor: default;
}
.position-picker__map {
    height: 280px;
    border-radius: 12px;
}

/* Taste Landscapes reuse the statistics disclosure language with one deeper level. */
.landscape-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.landscape-page-heading > div {
  max-width: 760px;
}
.landscape-intro {
  margin-bottom: 18px;
  padding: 18px 20px;
}
.landscape-intro p {
  margin: 0;
}
.landscape-intro p + p {
  margin-top: 5px;
}
.landscape-row {
  --family-accent: #8b6845;
}
.landscape-definition {
  max-width: 780px;
  margin: 0 0 8px;
  color: #3f3027;
  font-size: 14px;
}
.landscape-no-rating {
  color: var(--muted) !important;
}
.landscape-style-list,
.landscape-beer-list {
  display: grid;
  gap: 8px;
}
.landscape-style-row {
  overflow: hidden;
  border: 1px solid #e3d5c2;
  border-radius: 7px;
  background: #fffdf8;
}
.landscape-style-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.landscape-style-row > summary::-webkit-details-marker {
  display: none;
}
.landscape-style-row > summary > span:first-child,
.landscape-style-row__outcome {
  display: grid;
}
.landscape-style-row > summary small {
  color: var(--muted);
  font-size: 10px;
}
.landscape-style-row__outcome {
  text-align: right;
}
.landscape-style-row__outcome > strong {
  color: #8e4815;
  font: 700 18px "Playfair Display", serif;
}
.landscape-style-row[open] > summary {
  border-bottom: 1px solid #e3d5c2;
  background: #fbf3e7;
}
.landscape-style-row[open] > summary > .family-row__toggle::after {
  transform: rotate(225deg) translate(-1px, -1px);
}
.landscape-style-detail {
  padding: 12px;
}
.landscape-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
.landscape-facets > span {
  margin-right: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.landscape-facets small {
  padding: 2px 7px;
  border-radius: 999px;
  background: #eee3d5;
  color: #655345;
  font-size: 9px;
}
.landscape-beer {
  padding: 12px 14px;
  border: 1px solid #eadfce;
  border-radius: 7px;
  background: #fff;
}
.landscape-beer header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.landscape-beer header > span {
  display: grid;
}
.landscape-beer header > span:last-child {
  text-align: right;
}
.landscape-beer header small,
.landscape-tasting-list small {
  color: var(--muted);
  font-size: 10px;
}
.landscape-tasting-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.landscape-tasting-list > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  background: #f5ede2;
  font-size: 10px;
}
.landscape-limitations > p {
  color: var(--muted);
  font-size: 12px;
}
@media(max-width:700px) {
  .landscape-page-heading {
    display: block;
  }
  .landscape-page-heading .button {
    margin-top: 12px;
  }
  .landscape-style-row > summary {
    grid-template-columns: minmax(0, 1fr) 28px;
  }
  .landscape-style-row__outcome {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }
  .landscape-beer header {
    display: grid;
  }
  .landscape-beer header > span:last-child {
    text-align: left;
  }
}

/* A compact disclosure keeps optional medals out of the main form flow. */
.medal-picker-row { display: flex; align-items: flex-start; gap: .75rem; margin-top: .75rem; }
.medal-picker { flex: 1; min-width: 0; }
.medal-picker__summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 52px; padding: .4rem .75rem; cursor: pointer;
  border: 1px solid #d8cab6; border-radius: 10px; background: #fffdf9;
}
.medal-picker__summary:focus-visible { outline: 3px solid #ad7a23; outline-offset: 2px; }
.medal-picker__selection > span { display: flex; align-items: center; gap: .6rem; }
.medal-picker__selection .special-status-option__art { flex-basis: 40px; width: 40px; height: 40px; }
.medal-picker__action { color: var(--muted); font-size: .8rem; }
.medal-picker__clear { min-height: 52px; }
.medal-picker .special-status-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
@media (max-width: 600px) {
  .medal-picker-row { flex-wrap: wrap; }
  .medal-picker { flex-basis: 100%; }
  .medal-picker__summary { flex-wrap: wrap; }
}
.golden-page { background: #f5eddd; }
.golden-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid #a17a36;
  border-radius: 18px;
  background: radial-gradient(ellipse at top left, #805321, #372719 65%);
  color: #fff5df;
}
.golden-hero h1 { margin: 0; font-size: clamp(3rem, 7vw, 5rem); }
.golden-hero .eyebrow { color: #f1c978; }
.golden-hero p { max-width: 55ch; }
.golden-collections { display: flex; flex-wrap: wrap; gap: .5rem .875rem; margin-top: 1.25rem; }
.golden-collections a { display: inline-flex; gap: .25rem; color: #f1c978; font-size: .75rem; white-space: nowrap; }
.golden-gallery { max-width: 850px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.golden-page .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; max-width: 850px; margin: 2.5rem auto 1rem; }
.golden-page .section-head h2 { margin: 0; }
.golden-award {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fffbf2;
  border: 1px solid #d8bd83;
  border-top: 4px solid #b98b36;
  border-radius: 12px;
  box-shadow: 0 10px 30px #6242190c;
  overflow-wrap: anywhere;
}
.golden-award__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.golden-award__medal { display: flex; align-items: center; gap: .5rem; color: #78531c; font-weight: 700; }
.golden-award__score { display: grid; text-align: center; color: #78531c; flex-shrink: 0; }
.golden-award__score strong { font: 600 3.5rem/1 "Playfair Display", serif; }
.golden-award__score span { font-size: .75rem; }
.golden-award h2 { margin: 0; }
.golden-award h2 a { color: inherit; }
.golden-award__story { border-top: 1px solid #e8d8b8; margin-top: 1rem; padding-top: 1rem; }
.golden-award__story h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #78531c; }
.golden-award blockquote { margin: 0 0 1.5rem; font: 500 1.15rem/1.65 "Playfair Display", serif; }
.golden-award footer { margin-top: auto; font-size: .85rem; }
.golden-award footer a { color: #78531c; }
@media (max-width: 650px) {
  .golden-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .golden-gallery { grid-template-columns: 1fr; }
  .golden-page .section-head { flex-wrap: wrap; gap: .5rem; }
}
.nostalgia-page { background: #ede8dd; }
.nostalgia-hero { display: flex; align-items: center; gap: 2rem; max-width: 900px; margin: 1.5rem auto 3rem; padding: 2rem; }
.nostalgia-hero > img { width: 160px; height: 160px; object-fit: contain; flex-shrink: 0; }
.nostalgia-hero h1 { margin: 0; color: #584838; font-size: clamp(2.8rem, 7vw, 4.5rem); }
.nostalgia-hero p { max-width: 55ch; }
.nostalgia-journal { display: grid; gap: 2rem; max-width: 820px; margin: auto; }
.nostalgia-entry { position: relative; background: #fffaf0; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid #d5c9b3; border-radius: 3px; box-shadow: 4px 5px 0 #e0d6c5; overflow-wrap: anywhere; }
.nostalgia-entry::before { content: ""; display: block; width: 90px; height: 18px; background: #c9b99088; position: absolute; top: -9px; left: calc(50% - 45px); transform: rotate(-3deg); }
.nostalgia-entry h2 { margin: 0; }
.nostalgia-entry a { color: #705039; text-underline-offset: .2em; }
.nostalgia-discovery { display: inline-block; padding: .5rem .75rem; background: #eee5d5; font-size: .85rem; border-radius: 3px; }
.nostalgia-memory { border-top: 1px solid #e2d8c7; margin-top: 1.25rem; padding-top: 1.25rem; }
.nostalgia-memory blockquote { margin: 1rem 0; font: 500 1.3rem/1.8 "Playfair Display", serif; white-space: normal; }
.nostalgia-memory > a { font-size: .85rem; }
.nostalgia-later { margin-top: 1.75rem; border-top: 1px dashed #cbbb9e; padding-top: 1rem; font-size: .9rem; }
.nostalgia-later summary { cursor: pointer; color: #705039; }
.nostalgia-later > div { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid #d5c9b3; }
@media (max-width: 650px) {
  .nostalgia-hero { flex-direction: column; align-items: flex-start; gap: .75rem; padding: .5rem; }
  .nostalgia-hero > img { width: 100px; height: 100px; }
}

/* Shared geometry for medal collections; each theme retains its visual treatment. */
.medal-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 850px;
  margin: 2.5rem auto;
  padding: 2rem;
  gap: 2rem;
}
.medal-hero > :first-child {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
}
.medal-hero > div { min-width: 0; }
@media (max-width: 620px) {
  .medal-hero {
    align-items: flex-start;
    padding: 1.25rem;
    gap: 1rem;
  }
  .medal-hero > :first-child {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
  }
}

.golden-page main > .empty-state { max-width: 850px; margin-left: auto; margin-right: auto; }

/* Uilenzeik uses the existing medal surfaces with its standalone owl artwork. */
.special-status-option--uilenzeik .special-status-option__art img,
.special-status--uilenzeik .special-status__art img,
.timeline-memory--uilenzeik .timeline-memory__art img,
.dashboard-memory-card--uilenzeik .dashboard-memory-card__art img,
.beer-card__memory--uilenzeik img {
  left: 0;
  width: 100%;
  object-fit: contain;
}
.special-status-option--uilenzeik:has(input:checked),
.special-status--uilenzeik,
.dashboard-memory-card--uilenzeik {
  background: #e8eee8;
  border-color: #6b8179;
  color: #29483f;
}
.timeline-memory--uilenzeik { color: #36594b; }
.uilenzeik-page { background: #e8eee8; }
.uilenzeik-hero {
  color: #29483f;
  background: radial-gradient(ellipse at top left, #d4dfd0, #f4f2e5);
  border: 1px solid #a9b8a5;
  border-radius: 12px;
}
.uilenzeik-hero__art { object-fit: contain; }
.uilenzeik-hero h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5rem); }
.uilenzeik-hero p { max-width: 60ch; }
.uilenzeik-list { display: grid; gap: 1rem; max-width: 850px; margin: 0 auto 3rem; }
.uilenzeik-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.5rem;
  background: #f6f5ec;
  border: 1px solid #acbcad;
  border-left: 4px solid #607e6c;
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.uilenzeik-entry h2 { margin: .1rem 0; }
.uilenzeik-entry a { color: #36594b; }
.uilenzeik-entry blockquote { margin: .75rem 0; }
.uilenzeik-entry__rating { display: grid; place-content: center; text-align: center; color: #36594b; }
.uilenzeik-entry__rating strong { font: 700 2rem "Playfair Display", serif; }
.uilenzeik-entry__rating span { font-size: .75rem; }
@media (max-width: 640px) {
  .uilenzeik-entry { padding: 1rem; }
}

/* Shared external authorization and connection forms. */
.ask-panel { max-width: 800px; margin-bottom: 2rem; }
.ask-form { display: grid; gap: .8rem; }
.ask-form .button { justify-self: start; }
.ask-evidence { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border, #d8d1c5); border-radius: 8px; }

/* Account entry points. */
.account-nav {
  position: relative;
}
.account-nav > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: #f4e9dc;
  cursor: pointer;
  list-style: none;
}
.account-nav > summary::-webkit-details-marker {
  display: none;
}
.account-nav > summary::after {
  content: "▾";
  color: var(--gold);
}
.account-nav__panel {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  padding: 12px;
  border: 1px solid #665247;
  border-top: 3px solid var(--gold);
  border-radius: 0 0 8px 8px;
  background: var(--coffee);
  box-shadow: 0 16px 28px #160e09aa;
}
.account-nav__identity {
  margin: 0 0 8px;
  color: #cdbfb1;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.account-nav__panel a,
.mobile-nav__account > a {
  display: block;
  padding: 12px 10px;
}
.account-nav__panel a:hover,
.mobile-nav__account > a:hover {
  background: #3b2a21;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-nav__panel a[aria-current="page"],
.mobile-nav__account a[aria-current="page"] {
  color: var(--gold);
  text-decoration: underline;
}
.account-nav__panel form .button {
  width: 100%;
}
.account-nav > summary:focus-visible,
.account-nav__panel a:focus-visible,
.mobile-nav__account a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .mobile-nav__panel {
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
  .mobile-nav__actions {
    grid-template-columns: 1fr;
  }
  .mobile-nav__account {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #665247;
  }
  .mobile-nav__account h2 {
    margin: 0;
    padding-inline: 10px;
    color: #cdbfb1;
    font: 700 13px "DM Sans", sans-serif;
  }
  .mobile-nav__account form {
    margin: 8px 0 0;
  }
  .mobile-nav__account form .button {
    width: 100%;
    background: transparent;
    border-color: #665247;
    color: #eadfd2;
  }
}

/* Shared beer and brewery alphabetical indexes. */
.directory-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 16px 0;
  margin-bottom: 24px;
  border-block: 1px solid var(--line);
}
.directory-nav a, .directory-nav > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 40px;
  border-radius: 4px;
  font-weight: 700;
}
.directory-nav a { color: var(--coffee); text-decoration: none; }
.directory-nav a:hover { background: var(--cream); color: var(--ink); }
.directory-nav > span { color: var(--muted); opacity: .5; }
.alphabetical-directory { columns: 2; column-gap: 56px; }
.directory-group { break-inside: avoid; margin-bottom: 28px; }
.directory-letter { break-after: avoid; }
.directory-entry { break-inside: avoid; }
.directory-letter {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font: 600 38px/1.2 "Playfair Display", serif;
  color: var(--coffee);
  scroll-margin-top: 24px;
}
.directory-list { list-style: none; margin: 8px 0 0; padding: 0; }
.directory-entry { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.directory-entry__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.directory-entry__name > a { color: var(--ink); text-decoration: none; font-weight: 500; }
.directory-entry__name > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.directory-entry__brewery { display: block; font-size: 12px; color: var(--muted); }
.directory-country-flag {
  display: inline-block;
  width: 16px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -1px;
  object-fit: contain;
  filter: saturate(.72);
  opacity: .85;
}
.directory-entry--beer {
  /* Contain hidden text: WebKit otherwise positions it below fragmented columns. */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5ch 88px;
  column-gap: 8px;
  row-gap: 2px;
}
.directory-entry--beer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -8px;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--amber) 6%, transparent);
  opacity: 0;
  transition: opacity .16s ease;
}
.directory-entry--beer:hover::before,
.directory-entry--beer:focus-within::before { opacity: 1; }
.directory-entry--beer .directory-entry__name { grid-column: 1; grid-row: 1; }
.directory-entry--beer .directory-entry__rating { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.directory-entry--beer .directory-entry__actions { grid-column: 3; grid-row: 1 / 4; align-self: center; }
.directory-entry--beer .directory-entry__brewery,
.directory-entry__style {
  grid-column: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.directory-entry--beer .directory-entry__brewery { grid-row: 2; }
.directory-entry__style { grid-row: 3; }
.directory-entry__rating {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.directory-entry__actions {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  grid-template-rows: 24px;
  align-items: center;
}
.directory-entry__actions form { margin: 0; }
.directory-entry__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 12px;
  color: color-mix(in srgb, var(--muted) 75%, var(--ink));
}
.directory-entry__actions button svg { width: 20px; height: 20px; }
.directory-entry__actions .at-home-button svg { transform: translateX(4px); }
.directory-entry__actions .wishlist-button svg { transform: translateX(-4px); }
.directory-entry__actions button.is-active,
.directory-entry__actions button:hover { color: #8c581f; }
.directory-entry__actions .at-home-button.is-active .at-home-icon__door { stroke: var(--paper); }
.directory-nav a:focus-visible, .directory-entry a:focus-visible,
.directory-letter:focus, .directory-entry button:focus-visible {
  outline: 2px solid var(--coffee);
  outline-offset: 4px;
}
@media (max-width: 850px) {
  .alphabetical-directory--beer { columns: 1; }
}
@media (max-width: 700px) {
  .alphabetical-directory { columns: 1; }
  .directory-group { margin-bottom: 24px; }
}

/* Each drink category is one dropdown trigger, including its decorative chevron. */
.nav-links { align-items: center; }
.nav-category { display: flex; align-items: center; position: relative; }
.drink-menu > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; color: #cdbfb1; font-size: 14px; font-weight: 600;
  cursor: pointer; list-style: none; border-radius: 4px;
}
.drink-menu > summary::-webkit-details-marker { display: none; }
.drink-menu .nav-chevron {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s;
}
.drink-menu[open] .nav-chevron { margin-top: 3px; transform: rotate(225deg); }
.drink-menu > summary:hover, .drink-menu[open] > summary { color: #fff7eb; }
.nav-category.is-active summary, .nav-links > a[aria-current] { color: #fff7eb; }
.nav-links > a[aria-current]::after { opacity: 1; transform: scaleX(1); }
.drink-menu__panel {
  position: absolute; z-index: 1100; top: 100%; left: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px;
  width: 420px; max-height: min(680px, 75vh); overflow-y: auto;
  padding: 20px; border: 1px solid #665247;
  border-radius: 6px; background: var(--coffee); box-shadow: 0 16px 28px #160e0966;
}
.drink-menu__group p { margin: 0 0 7px; padding: 0 10px; color: #c9ab80; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.drink-menu__panel a { display: block; padding: 9px 10px; border-radius: 4px; color: #eadfd2; font-size: 13px; }
.drink-menu__panel a::after { display: none; }
.drink-menu__panel a:hover, .drink-menu__panel a[aria-current] { background: #4b392f; color: #fff7eb; }
.drink-menu summary:focus-visible, .nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cider-card__availability { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cider-card__availability form { margin: 0; }
.cider-card__availability .button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.catalogue-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.catalogue-summary strong { color: var(--coffee); }
.cider-empty { padding: 40px; text-align: center; }
@media (max-width: 1100px) {
  .mobile-nav__panel { max-height: calc(100dvh - 85px); overflow-y: auto; }
  .mobile-nav__links > .nav-category { display: block; }
  .mobile-nav__links .drink-menu { width: 100%; }
  .mobile-nav__links .drink-menu > summary {
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 10px;
    border-bottom: 1px solid #4b392f;
    color: #f4e9dc;
    font-size: 15px;
  }
  .mobile-nav__links .drink-menu > summary[aria-current] { color: var(--gold); }
  .mobile-nav__links .drink-menu__panel {
    position: static; width: auto; max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: none;
    padding: 16px 8px; margin-bottom: 8px; border: 1px solid #665247; border-radius: 4px;
  }
  .mobile-nav__links .drink-menu:not([open]) .drink-menu__panel { display: none; }
  .mobile-nav__links .drink-menu__panel a { padding: 10px; font-size: 13px; border: 0; }
  .mobile-nav__links a[aria-current] { color: var(--gold); }
  .mobile-nav__actions { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .mobile-nav__links .drink-menu__panel { grid-template-columns: 1fr; }
}

@media (min-width: 1101px) {
  .nav-links { align-self: stretch; }
  .nav-links .nav-category { align-self: stretch; }
  .nav-links .nav-category::after {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    height: 2px;
    background: var(--gold);
    content: "";
    opacity: 0;
    pointer-events: none;
  }
  .nav-links .nav-category:hover::after,
  .nav-links .nav-category.is-active::after,
  .nav-links .nav-category:focus-within::after { opacity: 1; }
}